Android UI简单美化

android UI简单美化

Selector(选择器)

activity_main.xml

    <!-- background指定控件背景使用那种选择器 --><EditTextandroid: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

    <EditTextandroid: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的选择器，

    <EditTextandroid: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" ><!-- 角的弧度 --><cornersandroid:radius="5dp"></corners><!-- 边框 --><strokeandroid:width="2px"android:color="#0000ff"></stroke><!-- 框框的大小 --><size android:width="200dp"android:height="40dp"></size><paddingandroid: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;@Overrideprotected 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() {@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {dl.closeDrawer(left);}});}@Overridepublic void onTabSelected(Tab tab, FragmentTransaction ft) {// TODO Auto-generated method stub}@Overridepublic void onTabUnselected(Tab tab, FragmentTransaction ft) {// TODO Auto-generated method stub}@Overridepublic 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" ><LinearLayoutandroid:id="@+id/context"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><ImageViewandroid:id="@+id/img"android:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/ic_launcher" /></LinearLayout><LinearLayoutandroid:id="@+id/left"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:layout_gravity="left" android:background="#0000FF"><ListViewandroid: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" ><LinearLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><RadioGroupandroid:id="@+id/fenzu"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><RadioButtonandroid:id="@+id/dao1"style="@style/radio"android:text="导航1" /><RadioButtonstyle="@style/radio"android:id="@+id/dao2"android:text="导航2" /><RadioButtonandroid:id="@+id/dao3"style="@style/radio"android:layout_height="wrap_content"android:text="导航3" /></RadioGroup><!-- 文本下面的那条线 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><TextViewandroid:id="@+id/t1"style="@style/textview"android:background="#00FF00" /><TextViewandroid:id="@+id/t2"style="@style/textview"android:visibility="invisible" /><TextViewandroid:id="@+id/t3"style="@style/textview"android:visibility="invisible" /></LinearLayout></LinearLayout><LinearLayoutandroid:id="@+id/left"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="left"android:background="#00FF00"android:orientation="vertical" ><Buttonandroid: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;@Overrideprotected 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() {@Overridepublic 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() {@Overridepublic void onClick(View v) {//参数指的是关闭抽屉出去的LinerLayuotdl.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完成该动画所需要的时间 --><alphaandroid: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;@Overrideprotected 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);}@Overridepublic 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);}}

Android UI简单美化相关推荐

Android Studio 简单UI界面
Android Studio 简单UI界面利用相对布局+线性布局进行设计,且支持国际化运行效果图如下实现过程: 1.将准备好的八个图标复制到res/drawable文件夹下 2.创建一个垂直的线 ...
Android 系统简单介绍
Android 系统简单介绍 2011年11月20日写这篇文章的目的是为了给那些刚刚入手安卓手机的新手们一些参考,希望他们能快速的上手 [第一期]ANDROID基础知识1~20 [第二期]继续泡! ...
Android UI设计经验分享，掌握设计技巧，让你的应用独树一帜
Android UI渲染是指Android应用程序中的用户界面如何被绘制.Android UI渲染很重要,因为渲染过程直接影响应用程序的性能和用户体验. 当用户在Android应用程序中进行交互时,应 ...
Android控件美化Shape
Android控件美化Shape你会用吗? -- 未审核编辑文档如果你对Android系统自带的UI控件感觉不够满意,可以尝试下自定义控件,我们就以Button为例,很早以前Android1 ...
android教程 - android ui 介绍,多图详解 “Android UI”设计官方教程
我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Andr ...
android ui秘笈,看图说话 – Android UI 设计秘笈：Part I
Android 的官方开发者博客发了一份幻灯片,介绍了一些 Android UI 设计的小贴士,Roger 在这里以看图说话的形式发出来,有兴趣的读者就继续往下翻吧.整个 PPT 共分5个部分,Par ...
android ui篇
android ui篇主要做两件事情. 第一件事情就是能够自己去定义基本的简单的界面. 第二件事情就是能够使用开源library去构造一些复杂的界面. 第一件事情就需要对于布局等方面知识有着基本的掌握 ...
Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框
作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993 个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 36523458 ...
Android UI编程之自定义控件初步（上）——ImageButton
概述: 我想我们在使用一些App的时候,应该不会出现一些"裸控件"的吧.除非是一些系统中的软件,那是为了保持风格的一致性,做出的一些权衡.我这里并非是在指责Android原生的控件 ...

Android UI简单美化

Android UI简单美化相关推荐

最新文章

热门文章