【移動開發(fā)】Android中不用圖片資源也能做出好看的界面

當(dāng)我們個人開發(fā)者做一款A(yù)ndroid應(yīng)用時，難免會為找不到好看的圖片資源而發(fā)愁，（不僅要寫代碼，還得要稍微會點PS什么的，唉！總之程序員什么都得要會一點。。。端好這碗飯可真不容易?。?img src="https://cache.yisu.com/upload/information/20200312/67/252232.jpg" alt="【移動開發(fā)】Android中不用圖片資源也能做出好看的界面">）要不就是好看的圖片資源有了，從而導(dǎo)致我們的軟件過大！怎么辦吶？

這里我給大家推薦一種簡單實用的方法，就是顏色值強化使用！

通常我們在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/文件夾下創(chuàng)建

例子：

<?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中有好多貌似我們都沒用過的標(biāo)簽。。。（其實剛開始我也是在不知道什么地方看到的，一頭霧水，覺得好玩就要研究研究么~）。首先，我們先來看一下：

1.shape 形狀

作根標(biāo)簽，使用： android:shape=["rectangle" | "oval" | "line" | "ring"] >

2.corners 圓角

用于shape被定義成rectangle時，使用： android:radius="integer"為角的弧度，值越大角越圓。

注：默認(rèn)值大于1才能顯示出圓角，0為沒有圓角。

3.gradient 漸變

指定shape的顏色值漸變，

android:type=["linear" | "radial" | "sweep"]

注：漸變角度：

4.padding 間隔（內(nèi)邊距）

5.size shape的寬和高

6.solid：實心

填充shape 使用：android:color指定填充的顏色

7.stroke：描邊

ok! 差不多把官方文檔上的連翻譯帶整理的總結(jié)完了，寫一個簡單的小例子，讓大家直觀的感受一下它的作用吧！

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，先列舉一個(具體實現(xiàn)請看最后的源代碼)

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

最終效果圖：

仔細觀察一下，圓角、漸變都已經(jīng)出來了，貌似比系統(tǒng)自帶的Dialog好看多了。

×××看附件