当我们个人开发者做一款Android应用时,难免会为找不到好看的图片资源而发愁,(不仅要写代码,还得要稍微会点PS什么的,唉!总之程序员什么都得要会一点。。。端好这碗饭可真不容易啊!
)要不就是好看的图片资源有了,从而导致我们的软件过大!怎么办呐?
这里我给大家推荐一种简单实用的方法,就是颜色值强化使用!
通常我们在res里xml中可以定义UI布局,按钮的按下效果,配置文件等,参阅博客:http://smallwoniu.blog.51cto.com/3911954/1248892,其实还可以自己定义控件的一些显示属性。
官方文档
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
查阅Shape Drawable,在res/drawable/文件夹下创建
例子:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
这里我们可以看到这个xml中有好多貌似我们都没用过的标签。。。(其实刚开始我也是在不知道什么地方看到的,一头雾水,觉得好玩就要研究研究么~)。首先,我们先来看一下:
1.shape 形状
作根标签,使用: android:shape=["rectangle" | "oval" | "line" | "ring"] >
值 | 描述 |
rectangle | 长方形,默认值 |
oval | 椭圆 |
line | 水平直线,可以通过<stroke>标签来定义宽度 |
ring | 环形 |
2.corners 圆角
用于shape被定义成rectangle时,使用: android:radius="integer"为角的弧度,值越大角越圆。
值 | 描述 |
android:topRightRadius | 右上角 |
android:bottomLeftRadius | 右下角 |
android:topLeftRadius | 左上角 |
android:bottomRightRadius | 左下角 |
3.gradient 渐变
指定shape的颜色值渐变,
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
值 | 描述 |
angle | 渐变角度。0是从左到右的,90是底部向顶部,必须是45的倍数,默认是0。 |
centerX | 以x位置为中心的渐变(0.0 -- 1.0)。 |
centerY | 以y位置为中心的渐变(0.0 -- 1.0)。 |
centerColor | 中心颜色 |
endColor | 结束颜色 |
gradientRadius | 径向渐变要指定半径值(android:type="radial" .) |
startColor | 开始颜色 |
type | linear:线性渐变,默认值 radial: 径向渐变 sweep: 扫线渐变 |
useLevel | 设置资源管理的画板(不是很懂。。。) |
注:渐变角度:
4.padding 间隔(内边距)
5.size shape的宽和高
6.solid:实心
填充shape 使用:android:color指定填充的颜色
7.stroke:描边
值 | 描述 |
width | 描边的宽度 |
color | 描边的颜色 |
dashWidth | 一个虚线"-"的宽度 |
dashGap | 一个虚线"-"的隔开距离 |
ok! 差不多把官方文档上的连翻译带整理的总结完了,写一个简单的小例子,让大家直观的感受一下它的作用吧!
exit_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="250dp"
android:layout_height="wrap_content"
android:background="@drawable/fragment_logout_button_backgroud_normal"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="100dp"
android:orientation="vertical" >
<TextView
android:id="@+id/oneBtnInfo"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_margin="2dp"
android:background="@drawable/exit_bg"
android:gravity="center"
android:text="提示信息"
android:textColor="#fff"
android:textSize="20sp" />
<TextView
android:id="@+id/tishiInfo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="确定要退出?"
android:textColor="#000"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_margin="2dp"
android:background="@color/gray_light"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="@+id/exit_btn"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="@drawable/fragment_logout_button_selector"
android:text="确定"
android:textColor="@color/black" />
<Button
android:id="@+id/cancel_btn"
android:layout_width="fill_parent"
android:layout_height="35dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="@drawable/fragment_logout_button_selector"
android:text="取消"
android:textColor="@color/black" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
这里使用到了我们前面讲到的shape,先列举一个(具体实现请看最后的源代码)
exit_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:centerColor="@color/blue"
android:endColor="@color/blue"
android:startColor="@color/blue"
android:type="linear" />
<stroke
android:width="0.5dp"
android:color="@color/blue" />
<corners
android:radius="2dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
/>
</shape>
MainActivity类
package com.zhf.android_dialog_shape;
import com.zhf.android_dialog_shape_theme.R;
import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
/**
* 测试自定义的Dialog(使用到了Shape Drawable)
* @author ZHF
*
*/
public class MainActivity extends Activity {
private AlertDialog alertDialog;
private Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = (Button) this.findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
loadExitDialog();
}
});
}
/**弹出自定义对话框**/
private void loadExitDialog() {
alertDialog = new AlertDialog.Builder(this).create();
alertDialog.show();
Window window = alertDialog.getWindow();
window.setContentView(R.layout.exit_dialog);
Button exit_btn = (Button) window.findViewById(R.id.exit_btn);
Button cancel_btn = (Button) window.findViewById(R.id.cancel_btn);
exit_btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
cancel_btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
alertDialog.dismiss();
}
});
}
}
最终效果图:
仔细观察一下,圆角、渐变都已经出来了,貌似比系统自带的Dialog好看多了。
×××看附件
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。