Android的UI特效

最新推荐文章于 2024-05-05 09:10:56 发布

-Sloth-

最新推荐文章于 2024-05-05 09:10:56 发布

阅读量1.4k

点赞数

分类专栏： Android基础

本文链接：https://blog.csdn.net/qq_29882585/article/details/52744522

版权

Android基础专栏收录该内容

27 篇文章 2 订阅

订阅专栏

资源文件的使用
一, res中文件放置的类型
res/animator 存放属性动画 xml文件
res/anim 存放补间动画 xml文件
res/drawable 存储的是图片的文件 .xml文件
res/drawable-hdpi 图片
res/layout 布局
res/menu 菜单
res/values 存储的是键值队的xml文件
strings 字符串
dimens 尺寸
style 样式
colors 颜色
arrays 字符串数组
二, android中资源文件包括两个部分
1, 可以通过R直接引用存放在 res 文件中
2, 不可以通过R直接引用存放在 assets文件中 AssetManager
三, color 资源
values 中的color常量
1, 在res/vlaues/ 中定义一个colors.xml <color name="red">#f00</color>
2, 引用 @color/red
drawable中的color常量
1, 在drawable中创建一个xml文件标签以<color>
2, 在标签中通过属性设置颜色: android:color = "@color/red"
3, 引用: @drawable/****
四, StateListDrawable 状态集合的图片 xml的文件
标签: <selector/>
android:state_pressed 是否处于按下的状态
android:state_focused 是否获取到焦点的状态
android:state_checked 是否被勾选的状态
五, LayerDrawable 包含了Drawable的资源文件按照数组的方式叠加文件
标签: <layer-list/>
相框进度条星级评论
六, ShapeDrawable 可以在xml中做自定义的形状
可以绘制: 矩形椭圆形线环形
标签: <shape />
七, ClipDrawable 代表从其他的图片上截取片段
标签: <clip/>
八, TransitionDrawable 简单的动画从一张图片过度到另一张图片不会直接改变是一帧一帧变化
标签: <transition/>
九, levelDrawable 等级的
标签: <level-list/>
十, 样式 style (作用在View之上 , 把公共的属性提取)
位置: res/values/styles.xml中
引用 : @style/***
可以定义子类:
1, 前缀式: 父样式的名字在子样式名字的前面出现格式: {父样式}. {子样式}
2, parent式: 设置属性 parent="父样式"
十一, 主题

Theme (作用在 Activity和Application上)

实例：

  <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="@drawable/bg"
        android:textSize="40dp" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_selector"
        android:background="@null"
        />
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
">
        <RadioButton
            android:id="@+id/man"
            android:text="男"
            android:drawableLeft="@drawable/my_selector_rb"
            android:checked="true"
            android:button="@null"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/woman"
            android:text="女"
            android:drawableLeft="@drawable/my_selector_rb"
            android:layout_width="wrap_content"
            android:button="@null"
            android:layout_marginLeft="100dp"
            android:layout_height="wrap_content" />
    </RadioGroup>
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/my_select_edit"
        android:ems="10"/>

//<span style="font-family: Arial, Helvetica, sans-serif;">ImageButton</span>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/pressed"/>
    <item android:state_pressed="false" android:drawable="@drawable/normal"/>
</selector>

//<span style="font-family: Arial, Helvetica, sans-serif;">RadioGroup</span>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/home_active" android:state_checked="true"></item>
    <item android:drawable="@drawable/home_unactive" android:state_checked="false"></item>
</selector>

//<span style="font-family: Arial, Helvetica, sans-serif;">EditText</span>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_focused="true" android:drawable="@drawable/blue"/>
   <item android:state_focused="false" android:drawable="@drawable/white"/>
</selector>

效果：

 <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/my_layer_image" />

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:progressDrawable="@drawable/my_layer_rating"
        android:numStars="5"
        android:rating="2"
        android:stepSize="0.5"/>

//qq相框

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

    <item
        android:id="@+id/qq"
        android:drawable="@drawable/qq"
        android:left="15dp"
        android:top="20dp"
        android:bottom="40dp"
        android:right="30dp"
        ></item>
</layer-list>

//星级评论

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:drawable="@drawable/unselect"
        ></item>

    <item android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/unselect"
        ></item>

    <item android:id="@android:id/progress"
        android:drawable="@drawable/selected"></item>
</layer-list>

效果：

public class ClipActivity extends Activity {

	private ImageView iv;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_clip);
		
		iv = (ImageView) findViewById(R.id.imageView1);
	}
	
	public void clip(View v)
	{
		ClipDrawable drawable = (ClipDrawable)iv.getDrawable(); 
		
		int curLevel = drawable.getLevel();
		
		drawable.setLevel(curLevel + 1000);
		
	}
}

<ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_clip"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点击截取" 
        android:onClick="clip"/>

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

    android:clipOrientation="horizontal"
    android:drawable="@drawable/android1"
    android:gravity="left">
    
</clip>

效果：

public class TransitionActivity extends Activity {

	private ImageView iv;
	
	private TransitionDrawable drawable;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_transition);
		
		iv = (ImageView) findViewById(R.id.imageView1);
		
		drawable = (TransitionDrawable) iv.getDrawable();
	}

	public void open(View v)
	{
		drawable.startTransition(5000);
	}
	
	public void close(View v)
	{
		drawable.reverseTransition(5000);
		
	}
}

<ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/transition" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开灯" 
        android:onClick="open"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="关灯" 
        android:onClick="close"/>

<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    
	<item android:drawable="@drawable/lamp_off"></item>
	<item android:drawable="@drawable/lamp_on"></item>
</transition>

效果：

public class LevelActivity extends Activity {

	private ImageView iv;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_level);

		iv = (ImageView) findViewById(R.id.imageView1);
	}

	public void clickButton(View v) {
		switch (v.getId()) {
		case R.id.button1:

			iv.setImageLevel(1);

			break;

		case R.id.button2:

			iv.setImageLevel(2);

			break;

		case R.id.button3:

			iv.setImageLevel(3);

			break;

		case R.id.button4:

			iv.setImageLevel(4);

			break;
		}
	}
}

 <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_level" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="clickButton"
            android:text="wifi1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="clickButton"
            android:text="wifi2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="clickButton"
            android:text="wifi3" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="clickButton"
            android:text="wifi4" />

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

    <item
        android:drawable="@drawable/wifi1"
        android:maxLevel="1"></item>

    <item
        android:drawable="@drawable/wifi2"
        android:maxLevel="2"></item>


    <item
        android:drawable="@drawable/wifi3"
        android:maxLevel="3"></item>


    <item
        android:drawable="@drawable/wifi4"
        android:maxLevel="4"></item>

</level-list>

效果：

  <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 
        android:background="@drawable/my_shape_rectangle"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 
        android:layout_marginTop="40dp"
        android:background="@drawable/my_shape_rectangle02"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="@drawable/my_shape_oval"
        android:text="Button" />

//my_shape_rectangle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"
    >
    
    <!-- 设置填充的颜色 -->
    <solid  android:color="#0ff"/>
    
    <!-- 设置内边距 -->
    <padding 
        android:left="15dp"
        android:top="15dp"
        android:right="15dp"
        android:bottom="15dp"
        />
    
    <!-- 设置矩形的边 android:dashWidth="" 虚线的宽度   android:dashGap=""  虚线的间距-->
    <stroke 
        android:width="3dp"
        android:color="#000000"
        android:dashWidth="10dp"
        android:dashGap="5dp"
        />

</shape>

// my_shape_rectangle02

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"
    >
    
    <!-- 设置渐变的颜色 -->
    <gradient 
        android:startColor="#FFFF00"
        android:endColor="#00FFFF"
        android:angle="45"
        />
    
    <!-- 设置圆角矩形 -->
    <corners 
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        />

</shape>

//<span style="font-family: Arial, Helvetica, sans-serif;">my_shape_oval</span>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"
    >
    
    <gradient 
        android:startColor="#FF0000"
        android:endColor="#0000FF"
        android:angle="45"
        android:type="sweep"
        />

</shape>

效果图：

 <Button
        android:id="@+id/button1"
        android:text="Button" 
        style="@style/ButtonStyle"/>

    <Button
        android:id="@+id/button2"
       style="@style/ButtonStyle.color"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        style="@style/Background"
        android:text="Button" />

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppBaseTheme" parent="android:Theme.Light"></style>
    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    <!-- 自定义样式 -->
    <style name="ButtonStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:padding">30dp</item>
        <item name="android:textSize">25sp</item>

    </style>
    <!-- 继承关系 -->
    <style name="ButtonStyle.color">
        <item name="android:textColor">@color/red</item>
    </style>

    <style name="Background" parent="ButtonStyle">
        <item name="android:background">#00FFFF</item>
    </style>
    <!-- 自定义主题 -->
    <style name="MyTheme" parent="AppTheme">

        <item name="android:background">#FAF0E6</item>
    </style>
</resources>

效果：

-Sloth-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android的UI特效

资源文件的使用一, res中文件放置的类型res/animator 存放属性动画 xml文件res/anim 存放补间动画 xml文件res/drawable 存储的是图片的文件 .xml文件 res/drawable-hdpi图片res/layout 布局 res/menu 菜单res/values 存储的是键值队的x
复制链接

扫一扫