如何在XmL中創建像這樣的圓柱形設計圖案android

我有三個圖像底蓋，圓柱體和頂部頭。我無法按照我的形象對齊它們。我需要一些幫助來做這件事，但徒勞無功。這是圖像。如何在XmL中創建像這樣的圓柱形設計圖案android

我試圖做這件事情以這種方式。這是代碼。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center"> 

     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/cap_cylinder" 
      android:id="@+id/imageView" /> 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/blue_cylinder" 
      android:layout_alignBottom="@+id/imageView" 
      android:layout_alignRight="@+id/imageView" 
      android:layout_alignEnd="@+id/imageView" 
      android:layout_marginBottom="39dp" /> 
     <ImageView 
      android:src="@drawable/blue_cap_cylinder" 
      android:layout_alignRight="@+id/imageView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </RelativeLayout> 
</RelativeLayout>

請幫我這麼做。我只需要一個完整的設計實現。

來源

2016-09-28 Junaid

平局。自定義視圖可能是您需要的。我的意思是，根據百分比值動態拉伸。 –

哪種類型的customview。我從來沒有做過。你可以解釋一下或者你的自定義視圖 – Junaid

。解釋如何在這裏將過於寬泛。基本上，您必須在每個週期重新繪製View內容，以便它立即對其暴露參數的更改作出反應。 –

您是否與提供這些圖像的圖形設計師合作？他們需要爲您提供一個九補丁圖像文件。展示他們：

https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

這是你會用什麼爲「拉伸」列圖像。

所以說你有一個位圖的基礎，併爲可伸縮列九個位置的補丁。然後，您使用XML創建LayerDrawable，其中包含一個ScaleDrawable，該列將該列縮放到正確的高度。

base_and_column.xml：

<?xml version="1.0" encoding="utf-8"?> 
<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:id="@+id/base" 
     android:gravity="bottom"> 
     <bitmap android:src="@drawable/base"/> 
    </item> 
    <item 
     android:id="@+id/column" 
     android:gravity="bottom|center_vertical"> 
     <scale android:scaleWidth="100%"> 
      <nine-patch android:src="@drawable/column"/> 
     </scale> 
    </item> 
</layer-list>

現在你可以使用這個可繪製作爲背景，而你甚至不需要一個ImageView：

 <View 
      android:layout_width="120dp" 
      android:layout_height="400dp" 
      android:background="@drawable/base_and_column"

設置大小，您只需設置可繪製背景的級別：

 // drawable levels go from 0 to 10000 
     columnView.getBackgroundDrawable().setLevel(percent * 100);

對於每日/每週/每月y文本，您可以使用FrameLayout在列視圖頂部覆蓋TextView。

你可以有三種不同的可繪製每種顏色一個，或者你可以使用Drawable.setColorFilter()採取中性色列和色調是藍色，綠色或橙：你的畫布上

 Drawable column = ((LayerDrawable) columnView.getBackgroundDrawable()).findDrawableByLayerId(R.id.column); 
     column.setColorFilter(backgroundColor, PorterDuff.Mode.MULTIPLY);

來源

2016-09-28 14:42:59

如何在XmL中創建像這樣的圓柱形設計圖案android

回答

相關問題