如何在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

回答

相关问题