【移动开发】Android中不用图片资源也能做出好看的界面

2024-12-18 技术教程

当我们个人开发者做一款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左下角

注：默认值大于1才能显示出圆角，0为没有圆角。

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好看多了。

×××看附件

附件：http://down.51cto.com/data/2363598