无法更改导航视图图标大小?



我像这样将自定义样式应用于我的导航视图:

app:theme="@style/NavigationDrawerStyle"

在我的风格中.xml像这样:

<style name="NavigationDrawerStyle">
<item name="android:textSize">16sp</item>
<item name="android:listPreferredItemHeightSmall">50dp</item>
<item name="listPreferredItemHeightSmall">50dp</item>
</style>

但是,无论我插入到自定义样式中的 dp 值如何,我使用的图标的大小都不会改变。它所做的只是缩放每个项目占用的空间,选项之间的空间增加等,但图标大小是固定的。我找不到任何选项/属性来修改图标大小。我该怎么做?

这是我正在使用的示例图标:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="73dp"
android:height="93dp"
android:viewportWidth="73.79"
android:viewportHeight="93.25">
<path
android:pathData="M73.06,9.52 L36.9,0 0.74,9.52s-9,67.56 36.16,83.74C82.1,77.08 73.06,9.52 73.06,9.52Z"
android:fillColor="#2980b9"/>
<path
android:pathData="M36.9,0V93.25C-8.3,77.08 0.74,9.52 0.74,9.52Z"
android:fillColor="#3498db"/>
<path
android:pathData="M36.9,44.25m-25.69,0a25.69,25.69 0,1 1,51.38 0a25.69,25.69 0,1 1,-51.38 0"
android:fillColor="#2c3e50"/>
<path
android:pathData="M36.9,23a10,10 0,1 1,-10 10A10,10 0,0 1,36.9 23Z"
android:fillColor="#ecf0f1"/>
<path
android:pathData="M56.78,60.51a25.69,25.69 0,0 1,-39.77 0,21.31 21.31,0 0,1 39.77,0Z"
android:fillColor="#ecf0f1"/>
</vector>

编辑:如果可能的话,我还希望能够分别指定高度和宽度。

我将问题作者的示例从 android 重新格式化为 svg,以尝试解释缩放原理。

  • 在下面的示例中,图标具有固定大小

width="73" height="93" viewBox="0 0 73 93"

widthheightviewport- 我们在小工具显示屏上看到的区域。
viewport / viewBox的比例决定了图标图像的比例。

在我们的例子中,比例将是M1:1也就是说,将显示图标,就像 73 x 93

一样增加viewport时,假设两倍width = "146"height = "186"
比例将是 -viewport / viewBox = 2图标图像也将加倍。
示例中的视口显示区域为红框。

尝试通过容器样式更改图标大小的尝试由绿色框的示例指示。

<style>
#container-Green {
display:block;
width:146;
height:186; 
outline: 1px solid green;
}
</style>
<div id="container-Green"> 
<svg  width="73" height="93" viewBox="0 0 73 93" style="border:1px solid red;" >
<g id="icon">
<path     d="M73.06,9.52 L36.9,0 0.74,9.52s-9,67.56 36.16,83.74C82.1,77.08 73.06,9.52 73.06,9.52Z"
fill="#2980b9"/>
<path   d="M36.9,0V93.25C-8.3,77.08 0.74,9.52 0.74,9.52Z"
fill="#3498db"/>
<path   d="M36.9,44.25m-25.69,0a25.69,25.69 0,1 1,51.38 0a25.69,25.69 0,1 1,-51.38 0"
fill="#2c3e50"/>
<path
d="M36.9,23a10,10 0,1 1,-10 10A10,10 0,0 1,36.9 23Z"
fill="#ecf0f1"/>
<path
d="M56.78,60.51a25.69,25.69 0,0 1,-39.77 0,21.31 21.31,0 0,1 39.77,0Z"
fill="#ecf0f1"/> 
	</g>
</svg> 
</div>

结论:

  • 您无法通过更改父图标来更改图标的大小 容器的维度样式。
  • 只有在更改大小时才能更改图标的大小viewportviewBox
  • 对于固定值,浏览器时图标比例不会更改 窗口大小已调整。换句话说,图像将没有响应。

百分比值示例

<style>
#container-Green {
display:block;
width:30%;
height:30%; 
outline: 1px solid green;
}
</style>
<div id="container-Green"> 
<svg  width="30%" height="30%" viewBox="0 0 73 93" style="border:1px solid red;" >
<g id="icon">
<path     d="M73.06,9.52 L36.9,0 0.74,9.52s-9,67.56 36.16,83.74C82.1,77.08 73.06,9.52 73.06,9.52Z"
fill="#2980b9"/>
<path   d="M36.9,0V93.25C-8.3,77.08 0.74,9.52 0.74,9.52Z"
fill="#3498db"/>
<path   d="M36.9,44.25m-25.69,0a25.69,25.69 0,1 1,51.38 0a25.69,25.69 0,1 1,-51.38 0"
fill="#2c3e50"/>
<path
d="M36.9,23a10,10 0,1 1,-10 10A10,10 0,0 1,36.9 23Z"
fill="#ecf0f1"/>
<path
d="M56.78,60.51a25.69,25.69 0,0 1,-39.77 0,21.31 21.31,0 0,1 39.77,0Z"
fill="#ecf0f1"/> 
	</g>
</svg> 
</div>

结论:

  • viewport的值设置为百分比时,图标图像 反应灵敏。
  • 您可以通过更改图标的初始大小viewport的百分比或父级的百分比 容器。

我最喜欢的主题是 svg,在 androde 中我理解得更糟。
但是在了解了缩放的工作原理之后,您可能可以将我的示例从 svg 重新格式化为 android。

很少在 android 中搜索百分比值的主题:

看,可以帮助你:

<android.support.percent.PercentFrameLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:background="#f0f0f0"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="25%"
app:layout_marginLeftPercent="25%" />
</android.support.percent.PercentFrameLayout>     

为了连接库,请将依赖项添加到应用程序的build.gradle文件的依赖项部分:

compile 'com.android.support:percent:23.0.0'

23.0.0 - 库的当前最新版本,可能会随时间而更改。

有关使用的更多详细信息

最新更新