Android 對控件設置邊框樣式(邊框顏色,圓角)和圖片樣式(圓角)


1、設置邊框、圓角、背景色案例

在drawable中 新建一個edge.xml文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 這里是設置背景色-->
    <solid android:color="@color/colorGrey" />
    <!-- 這里是設置為四周 也可以單獨設置某個位置為圓角-->
    <corners android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomRightRadius="5dp"
        android:bottomLeftRadius="5dp"/>
    <!-- 這里設置邊框 -->
    <stroke android:width="1dp" android:color="#000000" />
</shape>

 Activity頁面引用:

 android:background="@drawable/edge"

如下案例所示:

 <ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:background="@drawable/edge">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/et"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minLines="8"
                android:text="123456789" />

        </LinearLayout>
    </ScrollView>

說明: solid為填充色 即內部的背景填充色 ,stroke 為邊框 可以設置顏色和寬度

效果如下:

 2、設置邊框顏色案例: 

在drawable中 新建一個button_edge.xml文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 邊框顏色值 -->
    <item>
        <shape>
            <solid android:color="#3bbaff" />
        </shape>
    </item>

    <!--這個是按鈕邊框設置為四周 並且寬度為1-->
    <item
        android:right="1dp"
        android:left="1dp"
        android:top="1dp"
        android:bottom="1dp">
        <shape>
            <!--這個是背景顏色-->
            <solid android:color="#ffffff" />
            <!--這個是按鈕中的字體與按鈕內的四周邊距-->
            <padding android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

使用:

   android:background="@drawable/button_edge" 

3、設置圓角按鈕案例:(其實按鈕還是方形的,只是將外圍部分隱藏了而已) 
在drawable中: 新建一個 button_circle_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="#FFFFFF" />
    <!-- android:radius 弧形的半徑 -->
    <!-- 設置按鈕的四個角為弧形 -->
    <corners 
    android:radius="5dip" />  
    <!--也可單獨設置-->
    <!-- <corners -->
   <!-- android:topLeftRadius="10dp"-->
   <!-- android:topRightRadius="10dp"-->
   <!-- android:bottomRightRadius="10dp"-->
  <!--  android:bottomLeftRadius="10dp"-->
 <!--   />  -->
        **設置文字padding**
    <!-- padding:Button里面的文字與Button邊界的間隔 -->
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"
        />
</shape>

使用:

   android:background="@drawable/shape" 

4、設置圓角圖片案例

1 簡單的設置:(不能添加自定義圖片 只能設置顏色和字體) 
在drawable中 創建一個image_circle.xml圖片

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:topLeftRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"/>
</shape>

使用:

   android:background="@drawable/image_circle" 

5、真實案例:

 

 edge.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 邊框顏色值 -->
    <item>
        <shape>
            <solid android:color="#3bbaff" />
        </shape>
    </item>

    <!--這個是按鈕邊框設置為四周 並且寬度為1-->
    <item
        android:right="1dp"
        android:left="1dp"
        android:top="1dp"
        android:bottom="1dp">
        <shape>
            <!--這個是背景顏色-->
            <solid android:color="#ffffff" />
            <!--這個是按鈕中的字體與按鈕內的四周邊距-->
            <padding android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

布局文件 LeftFragment.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LeftFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal"
            android:padding="10dp"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@mipmap/user" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="手工登錄"
                android:textSize="20sp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@drawable/edge"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="20dp"
                android:text="賬號"
                android:textSize="15sp"/>
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="請輸入工廠管理系統賬號"
                android:background="@null"
                android:paddingLeft="10dp"
                android:textSize="15sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@drawable/edge"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="20dp"
                android:textSize="15sp"
                android:text="密碼" />
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="請輸入工廠管理系統登錄密碼"
                android:background="@null"
                android:paddingLeft="10dp"
                android:textSize="15sp"/>
        </LinearLayout>

        <CheckBox
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="記住密碼" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="登錄" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="登錄出現問題?" />
    </LinearLayout>
</FrameLayout>

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM