Android開發之漂亮Button樣式

開發中各種樣式的Button,其實這些樣式所有的View都可以共用的,可能對于你改變的只有顏色

所有的都是用代碼實現

150CC48D90067F05BFAC966F4EE3E21D.jpg

邊框樣式,給你的View加上邊框

    <Button
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_margin="5dip"
        android:layout_weight="1"
        android:background="@drawable/border_line_while"
        android:gravity="center"
        android:text="邊框樣式"
        />

邊框樣式border_line_while.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:useLevel="false"
    >
    <solid android:color="@null"/>
    <padding android:left="1dip"
        android:right="1dip"
        android:bottom="1dip"/>

    <stroke android:width="1dip"
        android:color="@color/theme_red"
        />
    <!--邊框寬度-->
    <size android:width="15dip"
        android:height="15dip"
        />
    <!--邊框-->
</shape>

圓角Button

    <Button
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_margin="5dip"
        android:layout_weight="1"
        android:background="@drawable/btn_bg_red"
        android:gravity="center"
        android:text="圓角Button"
        />

圓角樣式btn_bg_red.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/theme_red"/>
    <corners android:topLeftRadius="10dip"
        android:topRightRadius="10dip"
        android:bottomRightRadius="10dip"
        android:bottomLeftRadius="10dip" />
    <!--圓角矩形白色背景-->
</shape>

點底色的圓角Button,其實綜合上面的就可以自己寫

 <Button
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_margin="5dip"
        android:layout_weight="1"
        android:background="@drawable/check_border"
        android:gravity="center"
        android:text="帶邊框顏色的Button"
        />

點底色的圓角Button樣式check_border.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:state_pressed="true">-->
        <!--<shape android:shape="rectangle">-->
            <!--<stroke android:width="1px" android:color="@color/color_light_grey" />-->
            <!--<corners android:radius="3dp" />-->
            <!--<solid android:color="@color/color_detach_line" />-->
        <!--</shape>-->
    <!--</item>-->
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="1px" android:color="@color/theme_red" />
            <corners android:radius="10dp" />
            <solid android:color="@color/color_check_bg" />
        </shape>
    </item>
</selector>

帶點擊圓角狀態的Button,依賴樣式文件

 <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="@drawable/btn_nor_down"
            android:gravity="center"
            android:text="帶點擊狀態的Button"
            />

帶點擊圓角狀態的Button樣式btn_nor_down.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/check_border" />
    <item android:state_focused="true" android:drawable="@drawable/check_border" />
    <item android:state_checked="true" android:drawable="@drawable/check_border" />
    <item android:state_selected="true" android:drawable="@drawable/check_border"/>
    <item android:drawable="@drawable/btn_bg_red"></item>
</selector>

帶點擊狀態的Button,這個不依賴圓角樣式

   <Button
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="@drawable/btn_bottom_confirm_bg"
            android:gravity="center"
            android:text="帶點擊狀態的Button"
            />

帶點擊圓角狀態的Button樣式btn_bottom_confirm_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#f5f5f5"/>
            <stroke android:width="1px"
                    android:color="#cfcfd2"/>
            <padding android:top="1px"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <stroke android:width="1px"
                    android:color="#cfcfd2"/>
            <padding android:top="1px"/>
        </shape>
    </item>
</selector>

原形數字提醒

    <Button
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_marginLeft="20dip"
        android:background="@drawable/hint_superscript_red"
        android:gravity="center"
        android:text="數字提醒"
        />

原形數字提醒樣式hint_superscript_red.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="@color/white"/>
    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        />
    <!--描邊  紅色邊框-->
    <stroke android:width="1dp"
        android:color="@color/theme_red"
        />
    <size android:width="15dp"
        android:height="15dp"
        />
</shape>

請求網絡數據等待框

   <ProgressBar
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:layout_marginLeft="20dp"
            android:indeterminate="true"
            android:indeterminateDrawable="@drawable/progresstyle"
            android:indeterminateTintMode="src_in"/>

請求網絡數據等待框樣式progresstyle.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false" >
        <gradient
            android:centerY="0.50"
            android:endColor="@color/theme_red"
            android:startColor="@color/white"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

進度條

    <ProgressBar
        android:id="@+id/my_progress"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginLeft="20dp"
        android:max="10"
        android:progress="3"
        android:progressDrawable="@drawable/progressbar_color"/>

進度條樣式progressbar_color.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 背景  gradient是漸變,corners定義的是圓角 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="3dp"/>

            <solid android:color="@color/theme_red" />
        </shape>
    </item>
    <!-- 第二條進度條顏色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="3dp"/>
                <gradient
                    android:angle="90.0"
                    android:centerColor="#ac6079"
                    android:centerY="0.45"
                    android:endColor="#6c213a"
                    android:startColor="#FF51AAE6" />
            </shape>
        </clip>
    </item>
    <!-- 進度條 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dp"/>
                <solid android:color="#FF51AAE6" />
            </shape>
        </clip>
    </item>

</layer-list>

底部線條EditText

  <EditText
            android:text="底部線條EditText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/edit_for_line_bg"
            />

底部線條EditText樣式edit_for_line_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
    <selector>
        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
    </selector>

</inset>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容

  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,483評論 0 17
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,661評論 25 708
  • 記得剛開始學Android時,看著自己完全用系統控件寫出的不忍直視的界面,對于如何做出不一樣的按鈕,讓它們在不同狀...
    biloba閱讀 1,732評論 1 11
  • 先上預覽圖 activity_main.xml處寫界面代碼 xmlns:tools="http://schemas...
    Superbsco閱讀 9,706評論 10 24
  • 人理性與不理性,不是經濟學的基礎問題。 人理性不理性與經濟學沒有關系,經濟學關心的,不是人理性不理性的問題,而是人...
    朱坤耀閱讀 469評論 0 0