根据设备屏幕尺寸改变的Android绘图

我想在UI下面设计。为了达到同样的效果，我尝试使用drawables。 但是问题是：在不同的屏幕尺寸上可绘制显示不同。 对于屏幕尺寸6.0：来自椭圆形的可绘制物体和在下面：即将到来的圆圈。根据设备屏幕尺寸改变的Android绘图

UI设计尝试acheive：

content_layout：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:gravity="center_horizontal" 
    android:orientation="horizontal" 
    android:padding="16dp" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context="com.mediaagility.drawablesample.MainActivity" 
    tools:showIn="@layout/activity_main"> 

    <LinearLayout 
     android:id="@+id/linear1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/linear"> 

     <TextView 
      android:id="@+id/textview1" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/bg_layout" 
      android:gravity="center" 
      android:text="10" 
      android:textColor="@android:color/white" 
      android:textSize="22sp" /> 

    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/linear2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="8dp" 
     android:background="@drawable/linear"> 

     <TextView 
      android:id="@+id/textview2" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/bg_layout" 
      android:gravity="center" 
      android:text="10" 
      android:textColor="@android:color/white" 
      android:textSize="22sp" /> 

    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/linear3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="8dp" 
     android:background="@drawable/linear"> 

     <TextView 
      android:id="@+id/textview3" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/bg_layout" 
      android:gravity="center" 
      android:text="10" 
      android:textColor="@android:color/white" 
      android:textSize="22sp" /> 

    </LinearLayout> 
</LinearLayout>

linear_layout绘制：

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:innerRadius="0dp" 
android:shape="ring" 
android:thicknessRatio="2" 
android:useLevel="false"> 


    <stroke 
     android:width="3dip" 
     android:color="#FFB300" /> 
    <corners android:radius="10dip" 
     /> 
    <padding 
     android:bottom="8dp" 
     android:left="8dp" 
     android:right="8dp" 
     android:top="8dp" /> 
    </shape>

bg_layout：

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:innerRadius="0dp" 
    android:shape="ring" 
    android:thicknessRatio="2" 
    android:useLevel="false"> 

    <gradient 
     android:angle="-90" 
     android:endColor="#1c75d1" 
     android:gradientRadius="20dp" 
     android:type="linear" 
     android:startColor="#609ede" /> 


    <padding 
     android:bottom="8dp" 
     android:left="8dp" 
     android:right="8dp" 
     android:top="8dp" /> 
</shape>

main.class：

LinearLayout linear1 = (LinearLayout) findViewById(R.id.linear1); 
     LinearLayout linear2 = (LinearLayout) findViewById(R.id.linear2); 
     LinearLayout linear3 = (LinearLayout) findViewById(R.id.linear3); 


     LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
       LinearLayout.LayoutParams.WRAP_CONTENT, 
       LinearLayout.LayoutParams.WRAP_CONTENT 
     ); 

     layoutParams.width = ApplicationUtils.getScreenWidth(this)/4 +50; 
     layoutParams.height = ApplicationUtils.getScreenWidth(this)/4 +50; 
     layoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL; 
     layoutParams.leftMargin = ApplicationUtils.dpToPx(4); 
     layoutParams.rightMargin = ApplicationUtils.dpToPx(4); 

     linear1.setLayoutParams(layoutParams); 
     linear2.setLayoutParams(layoutParams); 
     linear3.setLayoutParams(layoutParams);

Please help me by suggesting how to design below UI which independent on screen size.

来源

2017-04-05 young_08

你输出的文章截图！ –

为什么要在Main.class下添加这些代码？ ** ApplicationUtils.getScreenWidth **正在引导您的UI更改。我看不出有任何意义。 –

@SanjogShrestha我添加了这个来根据屏幕大小获得圆圈大小，但是如果我不这样做，并且将ui完全设置在drawables上，那么它仍然会改变o屏幕大小 –

因为您正在设置固定大小LinearLayout这就是它拉长的原因。如果不需要，请将其移除。

您xml寻找合适你需要如果你想支持多屏固定大小那么你应该使用dimens.xml不同的DPI文件夹，在这里

layoutParams.width = ApplicationUtils.getScreenWidth(this)/4 +50; 
layoutParams.height = ApplicationUtils.getScreenWidth(this)/4 +50;

摸出

values-sw320dp-hdpi
个价值观sw320dp-MDPI
价值观sw320dp-xhdpi
价值观sw320dp-xxhdpi
价值观sw320dp-xxxhdpi

这个答案将指导您如何使用dimens.xml。3210，two

来源

2017-04-05 11:50:55

如果我删除50比我的3个圈来非常拥挤。如何处理它？ –

查看更新的答案！ –

非常感谢。信息真的有帮助。请大家提问，如果你觉得。再次感谢：）。 –

而是具有多背景绘制的，请尝试使用这种方法：

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:top="4dp" 
     android:right="4dp" 
     android:bottom="4dp" 
     android:left="4dp"> 
     <shape 
      android:shape="oval"> 
      <solid android:color="@color/colorPrimary" /> 
     </shape> 
    </item> 
    <item> 
     <shape 
      android:shape="oval"> 
      <stroke android:width="4dp" 
       android:color="@color/colorAccent"/> 
     </shape> 
    </item> 
</layer-list>

现在设置背景TextView的为：

android:layout_width="your_width" 
android:layout_height="your_height"  
android:background="@drawable/drawable_name"

这样，您就不必找的LinearLayout。

来源

2017-04-05 11:38:24

如果你看到UI图片，...有一个空间之间的外部和内圈。我怎样才能在单一drawable中实现这一点？ –

我玩弄你的代码。这真的很有帮助。 –

很高兴它帮助你！快乐编码！ –

将drawables导入到您的项目中最简单快捷的方法是使用drawable importer。这解决了具有不同屏幕尺寸的不同设备中的图像大小的问题。

来源

2017-04-05 12:39:09 Simo

根据设备屏幕尺寸改变的Android绘图

回答

相关问题