Android UI简单美化
android UI简单美化
Selector(选择器)
activity_main.xml
<!-- background指定控件背景使用那种选择器 -->
<EditText
android:id="@+id/ed2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/etext_seleector" />
etxt_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 当焦点该控件存在焦点时触发 其中con_watermarkvideo_porogressbar_played是图片名字-->
<item android:state_focused="true" android:drawable="@drawable/con_watermarkvideo_porogressbar_played"></item>
<item android:drawable="@drawable/con_watermarkvideo_porogressbar_notplay"></item>
</selector>
给每个ActoinBar设置点击之后的样子：
actionBar=getActionBar(); //设置导航模式 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); //添加导航项 并且为每一个导航设置选择器 Tab tab=actionBar.newTab().setIcon(R.drawable.tab1_selector).setTabListener(MainActivity.this); //添加导航项 actionBar.addTab(tab); tab=actionBar.newTab().setIcon(R.drawable.tab2_selector).setTabListener(MainActivity.this); actionBar.addTab(tab);
shape(图形)
Selector只能设置选中状态和非选中状态时候的样式(类似于if else),而shape的内容就比较丰富了，先看一下效果图。
Activity_main.xml
<EditText
android:id="@+id/etxt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/etxt_shape" />etxt_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 角的弧度 -->
<corners android:radius="5dp"
></corners>
<!-- 边框线 -->
<stroke android:width="2px"
android:color="#0000ff"></stroke>
<!-- 同于控件的padding -->
<padding android:left="10dp"
android:top="10dp"></padding>
<!-- 填充 -->
<solid android:color="#00ff00"></solid>
<!-- 大小 -->
<size android:width="200dp"
android:height="20dp"/>
<!-- 渐变色 -->
<gradient
android:startColor="#ff0000"
android:centerColor="#00ff00"
android:endColor="#0000ff"></gradient>
</shape>
上面的是EditText的，下面还有个TextView 10000元，这个实现也很简单，改变shape的形状就可以了
android:shape="line"
了解完Selector和Shape之后，下面来看一下二者的结合版，还是比较常用的，
同样设置EditText的选择器，
<EditText
android:id="@+id/etxt1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/etxt_selector"/>
在选择器里设置被选中展示的shape
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="@drawable/shape_f"></item>
<item android:drawable="@drawable/shape_nf"></item>
</selector>
最后设置图形shape展示的内容
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 角的弧度 -->
<corners
android:radius="5dp"></corners>
<!-- 边框 -->
<stroke
android:width="2px"
android:color="#0000ff"></stroke>
<!-- 框框的大小 -->
<size
android:width="200dp"
android:height="40dp"></size>
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"></padding>
</shape>
不难看出，这里的选择器相当于一个中间作用的桥梁，它接受了控件是否选中的结果，再调用具体shape显示。
DrawerLayout布局的使用：
QQ右侧滑动会有一个新页面占据大部分屏幕，这个就是DrawerLayout(抽屉)布局，效果图：
直接上代码：
MainActivity.java
package com.example.drawlayout;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.app.Activity;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
public class MainActivity extends Activity implements TabListener{
ImageView img;
DrawerLayout dl;
LinearLayout left;
ListView listview;
ActionBar actionBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
actionBar=getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
Tab tab = actionBar.newTab().setText("导航1").setTabListener(this);
actionBar.addTab(tab);
tab = actionBar.newTab().setText("导航2").setTabListener(this);
actionBar.addTab(tab);
dl = (DrawerLayout) findViewById(R.id.dl);
left=(LinearLayout) findViewById(R.id.left);
listview = (ListView) findViewById(R.id.listview);
listview.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,new String[]{"选项1","选项2","选项3"}));
listview.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
dl.closeDrawer(left);
}
});
}
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
@Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
@Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
activivy_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/dl"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/context"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="@+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="left"
android:background="#0000FF">
<ListView
android:id="@+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
代码看完了做一个小总结，抽屉布局（android.support.v4.widget.DrawerLayout）在XML里需要写包名.类名，需要把整个布局放在抽屉里面，两个LinearLayout分别占据屏幕和屏幕外侧，当滑动（滑动的是抽屉）的时候就把屏幕外侧的拉进来内侧了，这样效果类此抽屉，故此得名。但是这种写法DrawerLayout没有盖住ActionBar，是因为导航并不属于Layout中，这样就需要自定义ActionBar导航。
action
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RadioGroup
android:id="@+id/fenzu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/dao1"
style="@style/radio"
android:text="导航1" />
<RadioButton
style="@style/radio"
android:id="@+id/dao2"
android:text="导航2" />
<RadioButton
android:id="@+id/dao3"
style="@style/radio"
android:layout_height="wrap_content"
android:text="导航3" />
</RadioGroup>
<!-- 文本下面的那条线 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/t1"
style="@style/textview"
android:background="#00FF00" />
<TextView
android:id="@+id/t2"
style="@style/textview"
android:visibility="invisible" />
<TextView
android:id="@+id/t3"
style="@style/textview"
android:visibility="invisible" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#00FF00"
android:orientation="vertical" >
<Button
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="关闭菜单" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
MainActivity.java
public class MainActivity extends Activity {
RadioGroup rg;
TextView t1,t2,t3;
Button btn ;
DrawerLayout dl;
LinearLayout left;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
left=(LinearLayout) findViewById(R.id.left);
dl=(DrawerLayout) findViewById(R.id.container);
rg=(RadioGroup) findViewById(R.id.fenzu);
t1=(TextView) findViewById(R.id.t1);
t2=(TextView) findViewById(R.id.t2);
t3=(TextView) findViewById(R.id.t3);
rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.dao1:
t1.setVisibility(View.VISIBLE);
t2.setVisibility(View.INVISIBLE);
t3.setVisibility(View.INVISIBLE);
break;
case R.id.dao2:
t1.setVisibility(View.INVISIBLE);
t2.setVisibility(View.VISIBLE);
t3.setVisibility(View.INVISIBLE);
break;
case R.id.dao3:
t1.setVisibility(View.INVISIBLE);
t2.setVisibility(View.INVISIBLE);
t3.setVisibility(View.VISIBLE);
break;
default:
break;
}
}
});
btn=(Button) findViewById(R.id.btn);
btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//参数指的是关闭抽屉出去的LinerLayuot
dl.closeDrawer(left);
}
});
}
}
效果图:
旋转 渐变 移动 缩放 特效：
在res里新建anim文件夹(res里文件夹名字不要随意起)，新建rotate.xml alpha.xml trans.xml scale.xml
public void onClick(View view) {
Animation anim=null;
switch (view.getId()) {
case R.id.btnAlpha://渐变
//加载动画
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
break;
case R.id.btnRot://旋转
//加载动画
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
break;
case R.id.btnScale://缩放
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
break;
case R.id.btnTran://移动
anim=AnimationUtils.loadAnimation(MainActivity.this, R.anim.trans);
break;
default:
break;
}
//开启动画
imgv.startAnimation(anim);
}
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000">
<!-- fromDegrees旋转的开始角度
toDegrees旋转结束角度
pivotX、pivotY旋转的中心点的坐标 -->
</rotate>alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!-- fromAlpha开始的透明度 -->
<!-- duration完成该动画所需要的时间 -->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000"
></alpha>
</set>
trans.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="100%p"
android:fromYDelta="0%"
android:toYDelta="100%p"
android:duration="1000">
<!-- fromXDelta 开跑时X轴的位置
toXDelta 跑结束时X轴的位置-->
</translate>scale.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1"
android:toXScale="3"
android:fromYScale="1"
android:toYScale="3"
android:duration="1000">
<!-- pivotX、 pivotY缩放的中心坐标
fromXScale X周缩放开始的倍数
toXScale X轴缩放结束的倍数-->
</scale>
MainActivity.java
public class MainActivity extends Activity implements OnClickListener{
private ImageView imgv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.btnAlpha).setOnClickListener(this);
findViewById(R.id.btnRot).setOnClickListener(this);
findViewById(R.id.btnScale).setOnClickListener(this);
findViewById(R.id.btnTran).setOnClickListener(this);
imgv=(ImageView) findViewById(R.id.imgv);
}
@Override
public void onClick(View view) {
Animation anim=null;
switch (view.getId()) {
case R.id.btnAlpha://渐变
//加载动画
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
break;
case R.id.btnRot://旋转
//加载动画
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
break;
case R.id.btnScale://缩放
anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
break;
case R.id.btnTran://移动
anim=AnimationUtils.loadAnimation(MainActivity.this, R.anim.trans);
break;
default:
break;
}
//开启动画
imgv.startAnimation(anim);
}
}