Android_UI：drawable文件夹下创建XML

最新推荐文章于 2022-03-25 10:02:02 发布

原创最新推荐文章于 2022-03-25 10:02:02 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#drawable

Android_UI 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了如何在 Android 中实现各种 UI 效果，包括带边框的 TextView、圆角图片、圆图片等，并展示了如何使用 selector 实现状态切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 带边框的TextView

效果图：

布局：XML

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20px"
        android:layout_marginRight="20px"
        android:padding="20px"
        android:text="中华人民共和国"
        android:background="@drawable/tv_bg"/>

tv_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke android:width="2dp" android:color="#000000"/>  <!--边框的宽和颜色-->

    <corners android:radius="30dp"/><!--textview的角度-->

    <solid android:color="#00ff00"/><!--textView的背景颜色-->
</shape>

二; XML中创建圆角图片和圆图片

XML中创建设置圆角有色imageView，圆+有色imageView, selector+圆角imageview

效果图：

代码：http://download.youkuaiyun.com/detail/ss1168805219/9493012

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		ImageView imageView = (ImageView) findViewById(R.id.imageView);
		Button button = (Button) findViewById(R.id.button);
		
		imageView.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				
			}
		});
		
		button.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				
			}
		});
	}
}

第一个：圆角图片：

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
         android:layout_marginTop="20dp"
        android:background="@drawable/iv_bg2" />

iv_bg2:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="20dp" android:width="60dp"/>
    <solid android:color="#0084ff"/>
    <corners android:radius="10dip"/>
</shape>

第二个：圆图片

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
         android:layout_marginTop="20dp"
        android:background="@drawable/iv_bg3" />

iv_bg3:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="20dp" android:width="60dp"/>
    <solid android:color="#0084ff"/>
    <corners android:radius="100dip"/>
    
</shape>

第三个：带有selector

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:background="@drawable/iv_bg" />

iv_bg:

这种selector，drawable_normal一定要放在 state_pressed state_selected 后面，原因不清楚，

因为我放在前面点击没有颜色变化。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/drawable_pressed"/>
    <item android:state_pressed="true" android:drawable="@drawable/drawable_pressed"/>
    <item android:drawable="@drawable/drawable_normal"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
    <solid android:color="#0084ff"/>
</shape>

drawable_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
    <solid android:color="#00ff00"/>
</shape>

drawable_pressed.xml

第四个：圆带有selector

selector这个文件，默认的ITEM加载项，必须写在最后

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/btn_bg"
        android:padding="8dip"
        android:text="button" />

btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/drawable_pressed"/>
    <item android:state_pressed="true" android:drawable="@drawable/drawable_pressed"/>
    <item android:drawable="@drawable/drawable_normal"/>
</selector>

drawable_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
    <solid android:color="#00ff00"/>
</shape>

drawable_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp"/>
    <solid android:color="#0084ff"/>
</shape>

Shape

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <gradient
            android:startColor="#95C7D8"
            android:endColor="#607D8B"
            android:angle="270"/>
</shape>

android:angle="270":表示色彩变化从下到上。这个值必须为45的倍数，包括0，0表示从左往右渐变，逆时针旋转，依次是45，90，135.....，90表示从下往上渐变，270表示从上往下渐变，剩下的大家依次去推理。

阴影效果

参考：Android给布局、控件加阴影效果 + 在Android中实现阴影效果

由于elevation只可以在API>=21才可以使用，低版本无法使用，那么怎么使用呢？

都放在res/drawable目录中

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <padding
                android:bottom="10dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
            <solid android:color="#60CCCCCC"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 阴影部分 -->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="270"
                android:centerColor="#55424242"
                android:endColor="#99424242"
                android:startColor="#11424242"/>
            <corners android:radius="@dimen/dp5"/>
        </shape>
    </item>

    <!-- 背景部分 -->
    <item
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue"/>
            <corners android:radius="@dimen/dp5"/>
        </shape>
    </item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape >
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp"/>
            <corners android:radius="10dp"/>
            <solid android:color="#10CCCCCC"/>
        </shape>
    </item>

    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp"/>
            <corners android:radius="10dp"/>
            <solid android:color="#20CCCCCC"/>
        </shape>
    </item>

    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp"/>
            <corners android:radius="10dp"/>
            <solid android:color="#30CCCCCC"/>
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp"/>
            <corners android:radius="10dp"/>
            <solid android:color="#40CCCCCC"/>
        </shape>
    </item>

    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp"/>
            <corners android:radius="10dp"/>
            <solid android:color="#50CCCCCC"/>
        </shape>
    </item>

    <item>
        <shape>
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp"/>
            <corners android:radius="10dp"/>
            <solid android:color="#60CCCCCC"/>
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>

</layer-list>

字体和背景色 seletor中的颜色切换

如果是Text的颜色切换，那么用color;如果是控件背景色的切换，必须用drawable

点击改变字体和背景的颜色

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/color_selector"
            android:text="使用WebView"
            android:textColor="@color/color_selector"
            android:textAllCaps="false"/>

 
 字体颜色：color/color_selector ：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/white" android:state_pressed="true" />
    <item android:color="@android:color/black" />
</selector>

控件背景色 drawable/color_selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/color2"   android:state_checked="true"/>
    <item android:drawable="@color/color1"/>
</selector>