1. 程式人生 > >textview、edittext下劃線邊框,以及圓弧邊框的新增

textview、edittext下劃線邊框,以及圓弧邊框的新增

學習應該是一件被嚴謹對待的事情,近期正在做一個專案,如今算是告一段落,打算慢慢地將專案中用到的瑣碎的東西貼出來留作記憶以及與大家分享,好了不多廢話,上效果以及程式碼:


效果如圖所示:

所需要的是各種形狀的邊框以及下劃線,程式碼如下:

在工程中新建drawable資料夾,建立xml檔案,選擇shape:接下來就是編寫不同的效果:如下所示:

一、textview圓角邊框:

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

    <!-- 圓角邊框 -->
    
    <!-- 實心 背景色-->
    <solid android:color="@android:color/transparent" />
    <!-- 邊框 顏色-->
    <stroke
        android:width="0.5dp"
        android:color="@android:color/black" />
    <!-- 邊距 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

</shape>

二、圓形邊框:
<?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/red" />
    <padding
        android:bottom="20dp"
        android:left="10dp"
        android:right="10dp"
        android:top="20dp" />
    <!-- 背景色 -->
    <solid android:color="@color/transparents" />
    <!-- 邊框顏色 -->
    <stroke
        android:width="1dp"
        android:color="@color/red" />
    <size
        android:height="15dp"
        android:width="15dp" />
</shape>

三、左右兩側弧形邊框
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="@color/colorAccent" />
    <size android:height="30dp" />
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
    <!-- 邊距 -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />
</shape>

以上drawable資料夾下的檔案,可以直接在xml佈局中引用,使用background即可完成

四、edittext下劃線邊框:

新建一個MyEditText類繼承edittext,重寫MyEditText、onDraw方法

package com.example.shapebuttondemo.utils;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.EditText;

/**
 * 自定義EditText控制元件,新增白色下劃線
 * */
public class MyEditText extends EditText {

	private Paint mPaint;

	public MyEditText(Context context, AttributeSet attrs) {
		super(context, attrs);
		mPaint = new Paint();
		mPaint.setStyle(Paint.Style.STROKE);
		// 你可以根據自己的具體需要在此處對畫筆做更多個性化設定
		mPaint.setColor(Color.BLACK);
		
	}

	@Override
	public void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		// 畫底線
		canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1, this.getHeight() - 1, mPaint);
	}

}

五、xml佈局:

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.shapebuttondemo.activity.MainActivity" 
    android:background="@color/background">

    <!-- 圓角邊框 -->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/shape_textview"
        android:text="圓角邊框" />

    <!-- 橢圓邊框 -->

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/shape_circle"
        android:text="紅色按鈕"
        android:textColor="@color/red" />

    <!-- 左右兩邊圓形邊框 -->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_text"
        android:layout_margin="15dp"
        android:text="左右兩邊圓形邊框" />
    
    <com.example.shapebuttondemo.utils.MyEditText 
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:background="@color/transparents"
        android:layout_margin="15dp"
        android:hint="EditText下劃線"
        android:textColorHint="@color/red"
        android:textSize="12sp"
        />
    <com.example.shapebuttondemo.utils.TextViewUtils 
        android:layout_width="160dp"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:hint="TextView下劃線"
        android:textColorHint="@color/red"
        android:textSize="12sp"
        />
	
</LinearLayout>

按照以上步驟,即可獲得截圖上的邊框效果。