Android UI简单美化

最新推荐文章于 2023-04-04 23:15:19 发布
最新推荐文章于 2023-04-04 23:15:19 发布
阅读量3.5k 收藏 3
点赞数
分类专栏： android笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010829905/article/details/45915963
版权

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);
	}

}





 


不良丶青年
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android弹窗UI美化
12-07
"Android弹窗UI美化"是一个专注于提升应用内弹窗界面美观度的实践。在这个主题下，我们将探讨如何通过更改布局、添加图片等方法，将普通的对话框（Dialog）转化为更具吸引力的、高质感的设计。 首先，`android ...
Android的UI美化
混魔MJM的博客
08-30 1143
资源文件的使用 一, res中文件放置的类型 res/animator 存放属性动画 xml文件 res/anim 存放补间动画 xml文件 res/drawable 存储的是图片的文件 .xml文件 res/drawable-hdpi 图片 res/layout 布局 res/menu 菜单 res/values 存储的是键值队的xml文件 strings 字符串 dimen
Android UI美化基本
stay hungry stay foolish
05-24 2803
这一篇先给大家介绍最基本的UI美化知识，下一篇给大家上一个实例；     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape=["rectangle" | "oval" | "line" | "ring"] >   --- 默认为rectangle,矩形         
Android基础————UI布局之UI美化分解详解
u012369385的专栏
09-04 3646
UI美化 （1）color资源： 1、values的color常量： 引用方式：@color/xxx 1. 设置字体的颜色 android:textColor="@color/white" 2. 设置布局的背景颜色 android:background="@color/white" 2、drawable的color资源 1､ 在drawable目录下创建.xml文件，根标签
android界面美化教程,android界面UI美化：沉浸模式、全透明或半透明状态栏及导航栏的实现...
weixin_26798991的博客
06-01 1365
android api19开始我们就能对顶部状态栏和底部导航栏进行半透明处理了，而api21开始则可以实现全透明状态栏与导航栏以及开启沉浸模式，至于什么是沉浸模式，大家百度一下应该就都知道了，有一点需要强调的是全透明不是沉浸模式，前者只是将状态栏、导航栏的背景设置为完全透明，而后者则是完全将状态栏与导航栏隐藏并且只要在屏幕顶部下滑或在底部上滑就能短暂呼出状态栏与导航栏当然几秒钟之后还是会隐藏的；下...
android 控件美化,Android UI 美化
weixin_30356433的博客
05-29 870
一、自定义RatingBar的样式：1、在drawable文件夹下创建根节点为的文件写三个节点，代码如下：`android:drawable="@drawable/unselect">item>android:drawable="@drawable/unselect">item>android:drawable="@drawable/selected">item&gt...
android 官方ui 美化资源
03-10
总之，Android官方UI美化资源是开发者打造高质量、高一致性界面的宝贵工具。通过深入理解和充分利用这些资源，开发者可以显著提升应用的视觉效果，增强用户体验，同时也能更快地完成开发任务，提高效率。无论你是...
Android UI设计 按钮美化
08-25
Android UI 设计按钮美化 Android UI 设计中，按钮美化是非常重要的一方面。 buttons 在 Android 中是一个非常常见的控件，但是如果不加以美化，按钮的外观会显得很丑。其实，美化按钮并不是什么难事儿，简单地说，...
android 漂亮的UI界面 完整的界面设计
02-17
声明：这也是我学习时在网上下载的，鉴于分享精神，并且觉得很不错才上传...android 漂亮的UI界面 完整的界面设计 这是一个完整的UI设计，但是没写动作，这是一个公司程序员的公司任务设计，请别商用，要用请修改。。。
安卓Android源码——UI界面源码.zip
10-14
在安卓（Android）开发中，UI界面是用户体验的关键部分，其源码的解析与理解对于开发者来说至关重要。这个名为“安卓Android源码——UI界面源码.zip”的压缩包，很显然是一个包含Android用户界面（UI）相关源代码的...
APP智能手机UI创意美化设计-第三章
04-06
APP智能手机UI创意美化设计-第三章
android怎么美化ui,安卓教程第一期最终篇(转)systemui.apk最全修改美化
weixin_35950078的博客
05-27 901
该楼层疑似违规已被系统折叠隐藏此楼查看此楼1.status_bar_latest_event.xml的修改：源代码：xmlns:android="http://schemas.android.com/apk/res/android ">1.通知条目高度的修改：上面的65.0sp和64.0sp就是高度2.通知条目下面一般都有一条白线，透明方法：①drawable-mdpi文件夹内 divid...
Android studio界面ui优化
zzzzzwbetter的博客
04-04 2697
经验总结：记录一下对毕设界面的优化。
android stdio中简单的ui页面设计
2203_75508197的博客
03-05 1145
androd stdio简单的页面设计可根据此方法完成一个简单的页面设计
【Android笔记11】Android通过shape、selector修饰和美化UI控件的样式
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
07-09 306
目录一、Android组件美化1.1、shape（1）如何使用shape（2）添加TextView控件（3）corners圆角设置（4）solid设置背景（5）stroke设置描边（6）padding设置内边距（7）size设置宽高（8）gradient设置渐变色1.2、selector（1）selector选择器（2）selector使用1.3、shape和selector结合使用有时候，Android默认给我们提供的一些UI控件的样式可能不满足业务需求，那怎么办呢？？？不慌，Android给我们提供了s
Android酷炫实用的开源框架（UI框架）
热门推荐
fancychendong的专栏
05-17 27万+
Android酷炫实用的开源框架（UI框架）前言忙碌的工作终于可以停息一段时间了，最近突然有一个想法，就是自己写一个app，所以找了一些合适开源控件，这样更加省时，再此分享给大家，希望能对大家有帮助，此博文介绍的都是UI上面的框架，接下来会有其他的开源框架（如：HTTP框架、DB框架）。1.Side-Menu.Android 分类侧滑菜单，Yalantis 出品。 项目地址：https://gith
Android UI美化之 shape的使用及其属性总结
陈增庆的博客
02-17 423
Android UI美化之 shape的使用及其属性总结 近期在整理项目的过程中突然发现项目中有好多未曾使用过的图片，经过对比UI设计图片并检查代码后发现在UI上的这些地方都是通过drawable 下面的资源文件设置的背景，于是便想起来整理一下关于此类UI美化的东西，若存在写的不好的地方还希望大家多多指导。 本系列预计共3部分，本文具体内容为 shape 的使用，由于另外两篇文章暂时未整理，此...
Android UI 美化
Mr_ChenXu的博客
01-06 905
自定义RatingBar的样式 自定义圆角button 截取图片Clip Theme主题
AndroidUI设计美化
antkingwei的专栏
12-18 227
不要说Android中UI做的丑是因为不会美化，其实做一个漂亮的界面也不是什么打不了的事情 简单一说：shape是用来自己画图用的 其中gradient可以让它有个一个渐变效果，startColor 是开始的颜色，endColor是最后的颜色，angle用来确定方向，0表示Left_Right 90是Bottom——Top 180是Right——Left发现规律了吧，剩下的自己应该知道了 st...
android studio ui界面美化
最新发布
10-30
Android Studio提供了多种方法来美化UI界面，包括使用XML布局文件和代码实现。以下是一些常用的方法： 1.使用XML布局文件：可以使用不同的布局文件来实现不同的UI效果，例如使用RelativeLayout、LinearLayout、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值