文章目錄

• • 一、簡述
  • 二、xmlns-shape
  • • 1、了解
    • 2、深入了解corners
    • • （1）圖示
      • （2）屬性
  • 三、UI設計
  • • 1、圓角按鈕
    • 2、圓形按鈕
    • 3、普通按鈕
    • 4、圓角搜索組合按鈕
  • 四、具體使用

一、簡述

• 描述：如何修改Android中Button、ImageButton的原生顯示樣式，使得顯示效果更加符合人的審美，從UI設計上吸引客戶的使用率。
• 難度：初級
• 知識點：xmlns-shape的使用
• 展示
  
• 在實際項目中的應用

? ? UI工程師可以決定樣式，但色彩卻不是UI工程師能夠決定的，所以此項目基礎色彩基本由 白和灰 來展示。

二、xmlns-shape

1、了解

為了記憶方便，僅說明本篇內(nèi)使用到元素。

元素使用效果

solid	設置背景顏色
padding	設置內(nèi)邊距
corners	設置圓角
stroke	設置邊框陰影

2、深入了解corners

（1）圖示

（2）屬性

象限值屬性使用效果

一	topRightRadius	設置右上角弧度
二	bottomRightRadius	設置右下角弧度
三	bottomLeftRadius	設置左下角弧度
四	topLeftRadius	設置左上角弧度

三、UI設計

1、圓角按鈕

• 圖示
  
• 樣式設計（res -> drawable -> shape.xml）

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!-- 背景 --><solid android:color="#FFF"/><!-- 內(nèi)邊距 --><paddingandroid:right="10dp"android:top="10dp"android:left="10dp"android:bottom="10dp"/><!-- 圓角 --><corners android:radius="14dp"/><!-- 陰影 --><strokeandroid:width="1dp"android:color="#535252"/></shape>

2、圓形按鈕

• 圖示
  
• 樣式設計（res -> drawable -> shape_circular.xml）

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--設置顏色--><solid android:color="#FFF"/><!--設置圓角--><corners android:radius="25dp"/><!-- 陰影 --><strokeandroid:width="1dp"android:color="#000000"/></shape>

3、普通按鈕

• 圖示
  

• 樣式設計（res -> drawable -> stroke.xml）

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!-- 顏色 --><solid android:color="#FFF"/><!-- 內(nèi)邊距 --><paddingandroid:right="10dp"android:top="10dp"android:left="10dp"android:bottom="10dp"/><!-- 陰影 --><strokeandroid:width="1dp"android:color="#535252"/></shape>

4、圓角搜索組合按鈕

• 圖示
  
• 樣式設計1（res -> drawable -> shape12.xml）

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--設置顏色--><solid android:color="#FFF"/><!--設置圓角--><cornersandroid:topRightRadius="12dp"android:bottomRightRadius="12dp"/></shape>

• 樣式設計2（res -> drawable -> shape34.xml）

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--設置顏色--><solid android:color="#FFF"/><!--設置圓角--><cornersandroid:topLeftRadius="12dp"android:bottomLeftRadius="12dp"/></shape>

四、具體使用

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:background="#F0F0F0"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:padding="10dp"android:layout_marginTop="40dp"android:gravity="center"><!-- 圓角按鈕 --><Buttonandroid:layout_width="100dp"android:layout_height="wrap_content"android:background="@drawable/shape"android:text="確定"/><!-- 圓形按鈕 --><Buttonandroid:layout_width="50dp"android:layout_height="50dp"android:layout_marginLeft="20dp"android:background="@drawable/shape_circular"android:text="C"android:textSize="20dp"/><!-- 普通按鈕 --><Buttonandroid:layout_width="100dp"android:layout_height="50dp"android:layout_marginLeft="20dp"android:background="@drawable/stroke"android:text="按鈕"/></LinearLayout><!-- 圓角搜索組合按鈕 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:padding="10dp"android:gravity="center"><EditTextandroid:id="@+id/comm_search"android:layout_width="260dp"android:layout_height="40dp"android:background="@drawable/shape34"android:gravity="center"android:hint="Android開發(fā)-云端new守夜人"/><LinearLayoutandroid:layout_width="3dp"android:layout_height="40dp"android:gravity="center"android:background="#FFF"><TextViewandroid:layout_width="3dp"android:layout_height="20dp"android:background="#F0F0F0"/></LinearLayout><LinearLayoutandroid:layout_width="40dp"android:layout_height="40dp"android:gravity="center"android:background="@drawable/shape12"><ImageButtonandroid:id="@+id/cSearch"android:layout_width="25dp"android:layout_height="25dp"android:background="@drawable/sousuo"android:gravity="center"android:text="搜索" /></LinearLayout></LinearLayout></LinearLayout>

總結

以上是生活随笔為你收集整理的【AndroidUI设计】Button按钮样式设计（xmlns-shape及项目开发中的使用展示）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。