Android的UI美化

最新推荐文章于 2024-09-16 11:31:45 发布
最新推荐文章于 2024-09-16 11:31:45 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： android 文章标签： android ui 图片 优化
资源文件的使用

一, 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 #f00

2, 引用 @color/red


drawable中的color常量
1, 在drawable中创建一个xml文件 标签以
2, 在标签中通过属性设置颜色: android:color = "@color/red"
3, 引用: @drawable/****

四, StateListDrawable 状态集合的图片 xml的文件

 
android:state_pressed 是否处于按下的状态
android:state_focused 是否获取到焦点的状态
android:state_checked 是否被勾选的状态

五, LayerDrawable 包含了Drawable的资源文件 按照数组的方式叠加文件

相框 进度条 星级评论

六, ShapeDrawable 可以在xml中做自定义的形状

可以绘制: 矩形 椭圆形 线 环形

七, ClipDrawable 代表从其他的图片上截取片段


八, TransitionDrawable 简单的动画 从一张图片过度到另一张图片 不会直接改变 是一帧一帧变化

九, levelDrawable 等级的


十, 样式 style (作用在View之上 , 把公共的属性提取)

位置: res/values/styles.xml中
引用 : @style/***
可以定义子类:
1, 前缀式: 父样式的名字在子样式名字的前面出现 格式: {父样式}. {子样式}
2, parent式: 设置属性 parent="父样式"

十一, 主题

Theme (作用在 Activity和Application上)

实例：

<textview android:background="@drawable/bg" android:id="@+id/tv" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Hello World!" android:textsize="40dp">
 
  <imagebutton android:background="@null" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/my_selector">
  <radiogroup android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" "="">
      <radiobutton android:button="@null" android:checked="true" android:drawableleft="@drawable/my_selector_rb" android:id="@+id/man" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="男">
      <radiobutton android:button="@null" android:drawableleft="@drawable/my_selector_rb" android:id="@+id/woman" android:layout_height="wrap_content" android:layout_marginleft="100dp" android:layout_width="wrap_content" android:text="女">
  </radiobutton></radiobutton>
  <edittext android:background="@drawable/my_select_edit" android:ems="10" android:layout_height="wrap_content" android:layout_width="wrap_content"></edittext></imagebutton></textview>

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

效果：

\


<imageview android:background="@drawable/my_layer_image" android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_width="wrap_content">
 
   <ratingbar android:id="@+id/ratingBar1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:numstars="5" android:progressdrawable="@drawable/my_layer_rating" android:rating="2" android:stepsize="0.5"></ratingbar></imageview>

qq相框 

<!--?xml version="1.0" encoding="utf-8"?-->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/back" android:id="@+id/back"></item>
 
    <item android:bottom="40dp" android:drawable="@drawable/qq" android:id="@+id/qq" android:left="15dp" android:right="30dp" android:top="20dp"></item>
</layer-list>

星级评论 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/unselect" android:id="@android:id/background"></item>
 
    <item android:drawable="@drawable/unselect" android:id="@android:id/secondaryProgress"></item>
 
    <item android:drawable="@drawable/selected" android:id="@android:id/progress"></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_height="wrap_content" 
android:layout_width="wrap_content" android:src="@drawable/my_clip">
<button android:id="@+id/button1" android:layout_height="wrap_content" 
android:layout_width="wrap_content" android:οnclick="clip" android:text="点击截取"></button>
</imageview>


<!--?xml version="1.0" encoding="utf-8"?-->
<clip android:cliporientation="horizontal" android:drawable="@drawable/android1" android:gravity="left" xmlns:android="http://schemas.android.com/apk/res/android">
</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_height="wrap_content" 
android:layout_width="wrap_content" android:src="@drawable/transition">
<button android:id="@+id/button1" android:layout_height="wrap_content" 
android:layout_width="wrap_content" android:οnclick="open" android:text="开灯">
</button>
<button android:id="@+id/button2" android:layout_height="wrap_content"
 android:layout_width="wrap_content" android:οnclick="close" android:text="关灯">
</button>
</imageview>


<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_height="wrap_content" 
android:layout_width="wrap_content" android:src="@drawable/my_level">
   <linearlayout android:layout_height="wrap_content" android:layout_margintop="50dp" android:layout_width="wrap_content"><button 
android:id="@+id/button1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:οnclick="clickButton" android:text="wifi1">
</button>
<button android:id="@+id/button2" android:layout_height="wrap_content" 
android:layout_width="wrap_content" android:οnclick="clickButton" android:text="wifi2">
</button>
<button android:id="@+id/button3" android:layout_height="wrap_content" android:layout_width="wrap_content" 
android:οnclick="clickButton" android:text="wifi3">
</button>
<button android:id="@+id/button4" android:layout_height="wrap_content"
 android:layout_width="wrap_content" android:οnclick="clickButton" android:text="wifi4"></button>
</linearlayout>
</imageview>



<!--?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:background="@drawable/my_shape_rectangle" android:id="@+id/button1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="Button"></button><button android:background="@drawable/my_shape_rectangle02" android:id="@+id/button2" android:layout_height="wrap_content" android:layout_margintop="40dp" android:layout_width="wrap_content" android:text="Button"></button><button android:background="@drawable/my_shape_oval" android:id="@+id/button3" android:layout_height="wrap_content" android:layout_margintop="40dp" android:layout_width="wrap_content" android:text="Button"></button>


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

my_shape_rectangle02 

<!--?xml version="1.0" encoding="utf-8"?-->
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">   
<!-- 设置渐变的颜色 -->
<gradient android:angle="45" android:endcolor="#00FFFF" android:startcolor="#FFFF00">
<!-- 设置圆角矩形 -->
<corners android:bottomleftradius="20dp" android:bottomrightradius="20dp" android:topleftradius="20dp" android:toprightradius="20dp">
</corners></gradient></shape>


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


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

效果图：

\


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


<resources xmlns:android="http://schemas.android.com/apk/res/android"><style name="AppBaseTheme" parent="android:Theme.Light" type="text/css"></style>
    <!-- Application theme. --><style name="AppTheme" parent="AppBaseTheme" type="text/css"><!-- All customizations that are NOT specific to a particular API-level can go here. --></style>
    <!-- 自定义样式 --><style name="ButtonStyle" type="text/css"><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" type="text/css"><item name="android:textColor">@color/red</item></style><style name="Background" parent="ButtonStyle" type="text/css"><item name="android:background">#00FFFF</item></style>
    <!-- 自定义主题 --><style name="MyTheme" parent="AppTheme" type="text/css"><item name="android:background">#FAF0E6</item></style>
</resources>


效果：

\



原文链接：http://www.2cto.com/kf/201610/553300.html











混魔MJM
关注
专栏目录
android 控件美化,Android UI 美化
weixin_30356433的博客
05-29 928
一、自定义RatingBar的样式：1、在drawable文件夹下创建根节点为的文件写三个节点，代码如下：`android:drawable="@drawable/unselect">item>android:drawable="@drawable/unselect">item>android:drawable="@drawable/selected">item&gt...
Android UI美化——颜色
weixin_42777389的博客
01-24 736
一、格式要求 #ff000000 此为16进制颜色代码，前2位ff为透明度，后6位为颜色值（000000为黑色，ffffff为白色，可以用ps等软件获取）。 透明度分为256阶（0-255），计算机上用16进制表示为（00-ff）。 透明就是0阶，不透明就是255阶。 不透明度 16进制值 100% FF 95% F2 90% E6 85% D9 80% CC 75% BF 70% B3 65% ...
android 官方ui 美化资源
03-10
android官方推出的界面美化资源请享用
Android漂亮的UI库集合
热门推荐
Dream It Possible
01-06 2万+
这是一个github库，别人整理的，我只能说相当的震撼，图太多，我就不复制了，自己点击去吧： https://github.com/wasabeef/awesome-android-ui
Android应用沉浸式设计：导航栏、背景与图片拉伸实现
最新发布
weixin_42551310的博客
09-16 1564
本文还有配套的精品资源，点击获取 简介：在Android应用开发中，实现沉浸式导航栏、背景图片以及图片拉伸回弹效果，能显著提升用户体验。本文将指导开发者如何通过设置Window透明度、调整根布局背景以及实现自定义滚动视图中的图片拉伸与回弹来达成这些效果。此外，还涉及导航栏渐变效果的实现方法，并借助 TranslucentScrollView-master 项目...
[Android] Android开发优化之——对界面UI的优化（2）
runfeel
01-30 148
在一个应用程序中，一般都会存在多个Activity，每个Activity对应着一个UI布局文件。一般来说，为了保持不同窗口之间的风格统一，在这些UI布局文件中，几乎肯定会用到很多相同的布局。如果我们在每个xml文件中都把相同的布局都重写一遍，一个是代码冗余，可读性很差；另一个是修改起来比较麻烦，对后期的修改和维护非常不利。所以，一般情况下，我们需要把相同布局的代码单独写成一个模块，然后在用到的时候...
AndroidUI设计美化
antkingwei的专栏
12-18 240
不要说Android中UI做的丑是因为不会美化，其实做一个漂亮的界面也不是什么打不了的事情 简单一说：shape是用来自己画图用的 其中gradient可以让它有个一个渐变效果，startColor 是开始的颜色，endColor是最后的颜色，angle用来确定方向，0表示Left_Right 90是Bottom——Top 180是Right——Left发现规律了吧，剩下的自己应该知道了 st...
Android UI 美化
Mr_ChenXu的博客
01-06 954
自定义RatingBar的样式 自定义圆角button 截取图片Clip Theme主题
Android UI美化：shape与selector实战指南
"这篇教程介绍了如何在...shape和selector在Android开发中扮演着美化界面的关键角色，它们使得开发者能够轻松地创建各种动态效果，提升用户体验。通过灵活组合使用这些元素，可以创建出丰富多彩且具有交互性的UI设计。
Android UI美化：shape与selector的使用详解及代码实例
将shape和selector结合使用，可以轻松地实现自定义的按钮或其他视图的美化效果，例如创建一个带有圆角且在按下时颜色变化的按钮： ```xml <!-- my_button_selector.xml --> <item android:state_pressed="true"> ...
Android弹窗UI美化
12-07
"Android弹窗UI美化"是一个专注于提升应用内弹窗界面美观度的实践。在这个主题下，我们将探讨如何通过更改布局、添加图片等方法，将普通的对话框（Dialog）转化为更具吸引力的、高质感的设计。 首先，`android ...
Android UI设计 按钮美化
08-25
Android UI设计 按钮美化
android 漂亮的UI界面 完整的界面设计
02-17
声明：这也是我学习时在网上下载的，鉴于分享精神，并且觉得很不错才上传上来的。。。。。 android 漂亮的UI界面 完整的界面设计 这是一个完整的UI设计，但是没写动作，这是一个公司程序员的公司任务设计，请别商用，要用请修改。。。
android 美观好用界面设计
12-08
自己写的界面，简单，可以移植高，对初学者或者应用开发人员，都是很好的
Android UI美化基本
stay hungry stay foolish
05-24 2840
这一篇先给大家介绍最基本的UI美化知识，下一篇给大家上一个实例；     xmlns:android="http://schemas.android.com/apk/res/android"     android:shape=["rectangle" | "oval" | "line" | "ring"] >   --- 默认为rectangle,矩形         
Android UI简单美化
不良丶青年
05-22 3548
android UI简单美化 UI美化常用到会用到这四种：Selector(选择器)，style(样式)，Theme(主题)，shape(图形)，并且在res文件夹下新建drawable，美化的样式通常放在这里 Selector(选择器) activity_main.xml <EditText android:id="@+id/ed2" a
Android studio界面ui优化
zzzzzwbetter的博客
04-04 2959
经验总结：记录一下对毕设界面的优化。
android界面美化教程,android界面UI美化：沉浸模式、全透明或半透明状态栏及导航栏的实现...
weixin_26798991的博客
06-01 1438
android api19开始我们就能对顶部状态栏和底部导航栏进行半透明处理了，而api21开始则可以实现全透明状态栏与导航栏以及开启沉浸模式，至于什么是沉浸模式，大家百度一下应该就都知道了，有一点需要强调的是全透明不是沉浸模式，前者只是将状态栏、导航栏的背景设置为完全透明，而后者则是完全将状态栏与导航栏隐藏并且只要在屏幕顶部下滑或在底部上滑就能短暂呼出状态栏与导航栏当然几秒钟之后还是会隐藏的；下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值