碼上快樂

相關內容    簡體    繁體

GridLayout 使用

本文轉載自   查看原文   2016-12-20 18:51   1841    Android

上次做了一個小鍵盤，請見：PopupWindow 使用。

效果是這樣的：

11_thumb1

可以看到，上面的按鍵是不一樣大小的。因為是用LinearLayout布局，用的Button樣式也是默認的。數字鍵和文字鍵的大小不一致。

為了使按鍵大小一致，並且定制Button樣式，決定改用GridLayout實現。過程如下：

1.GridLayout

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/pinpad_dialog"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:columnCount="3"
    app:orientation="horizontal"
    app:rowCount="6">

    <Button
        android:id="@+id/btnUp"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_func_style"
        android:gravity="center"
        android:soundEffectsEnabled="true"
        android:text="@string/up_arrow"
        android:textSize="26sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btnDown"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_func_style"
        android:soundEffectsEnabled="true"
        android:text="@string/down_arrow"
        android:textSize="26sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btnMenu"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_func_style"
        android:soundEffectsEnabled="true"
        android:text="Menu"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn1"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="1"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn2"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="2"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn3"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="3"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn4"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="4"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn5"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="5"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn6"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="6"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn7"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="7"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn8"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="8"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn9"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="9"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btnFunc"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_func_style"
        android:soundEffectsEnabled="true"
        android:text="Func"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btn0"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_button_style"
        android:soundEffectsEnabled="true"
        android:text="0"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btnAlpha"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_clear_style"
        android:soundEffectsEnabled="true"
        android:text="Alpha"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btnCancel"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_cancel_style"
        android:soundEffectsEnabled="true"
        android:text="Cancel"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btnClear"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_clear_style"
        android:soundEffectsEnabled="true"
        android:text="Clear"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

    <Button
        android:id="@+id/btnEnter"
        android:layout_height="30dp"
        android:layout_margin="3dp"
        android:background="@drawable/key_btn_enter_style"
        android:soundEffectsEnabled="true"
        android:text="Enter"
        android:textSize="20sp"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1" />

</android.support.v7.widget.GridLayout>
View Code 

這里說明幾點：

（1）android.support.v7.widget.GridLayout

這里用的是V7包中的GridLayout，因為在當前開發的應用中，設置minSdkVersion是19。
而下面要用到的兩個屬性，在一般的GridLayout中需要API21才能使用。
在AndroidStudio中，默認是還沒有下載兼容包的控件的，在design模式下，點擊相應的AppCompat控件，下載即可。
image

（2）使GridLayout的子元素平分屏幕

需要用下面的這兩個屬性。

app:layout_columnWeight="1" 

app:layout_rowWeight="1"

具體參考：Android的GridLayout的子元素如何平分屏幕

2.自定義button樣式

(1)自定義的drawable

key_button_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#656462" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp" />
        </shape>
    </item>
    <item
        android:bottom="1px"
        android:left="1px"
        android:right="1px"
        android:top="1px">
        <shape>
            <gradient
                android:angle="90"
                android:centerX="0.5"
                android:centerY="0.5"
                android:endColor="#fbf8f4"
                android:startColor="#7b7b79"
                android:type="linear" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp" />
        </shape>
    </item>
</layer-list>
View Code

key_button_default.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#656462" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp" />
        </shape>
    </item>
    <item
        android:bottom="1px"
        android:left="1px"
        android:right="1px"
        android:top="1px">
        <shape>
            <gradient
                android:angle="90"
                android:centerX="0.5"
                android:centerY="0.5"
                android:endColor="#fbf8f4"
                android:startColor="#656462"
                android:type="linear" />
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp" />
        </shape>
    </item>
</layer-list>
View Code

（2）自定義的selector

key_button_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/key_button_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/key_button_default" />
</selector>
View Code

在上面這個selector中，就用到上面的兩個drawable文件。

key_btn_cancel_style.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="#e7352c" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#da2219" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
</selector>
View Code

key_btn_func_style.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="#2a7afb" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#126af9" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
</selector>
View Code

key_btn_enter_style.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="#4de947" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#2ac824" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
</selector>
View Code

key_btn_clear_style.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="#f2992d" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#f78a04" />
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="5dp" android:topLeftRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>
</selector>
View Code

(3)將selector應用到button中

android:background="@drawable/key_btn_enter_style"
將Button的background屬性，設置為相應的selector即可。

3.其他

在設置顏色的時候，一度找不到取色器。
原來只要點擊xml文件左側的顏色即可，參考下圖：
image

4.效果

下面是以上GridLayout和自定義Button的效果圖：

image


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 GridLayout: GridLayout使用簡介(轉) GridLayout: GridLayout中Spec屬性 解決 android.support.v7.widget.GridLayout 使用 xmlns:app 出現 error 的問題 Gridlayout動態添加 Android 布局之GridLayout android GridLayout布局 GridLayout(網格布局) GridLayout和GridView的區別 Android中GridLayout與GridView區別 Android——gridLayout(網格布局)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM