根據設備屏幕尺寸改變的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繪圖

回答

相關問題