UI組件：顧名思義，就是手機中常見的各種文本框，按鈕，框架等待

常用的有 TextView，EditText ，Button， ImageView ，Dialog ，ListView ，GridView 以及用來包含這些的Layout 常用的Layout有LinearLayout RelativeLayout FrameLayout

這篇先介紹：

TextView ,EditTest，Button,?

音量調整條（SeekBar），

下載進度條直線型（ProgressBar），

加載進度條圓型（ProgressBar），

星星評價（RatingBar）
這幾個。

如圖：4個例子，6個方法，6個頁面，

一個自定義樣式mystyle,一個自定義顏色color，一張圖片作為 圖片按鈕

主頁：

? ? ?

主頁面 功能代碼：Maintivity.java

package com.open_open.uizujian;import android.app.Activity; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}public void testOne(View view){Intent intent = new Intent(this,TestOneActivity.class);startActivity(intent);}public void testTwo(View view){Intent intent = new Intent(this,TestTwoActivity.class);startActivity(intent);}public void testThree(View view){Intent intent = new Intent(this,TestThreeActivity.class);startActivity(intent);}public void testFour(View view){Intent intent = new Intent(this,TestFourActivity.class);startActivity(intent);} }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <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="horizontal"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:layout_marginTop="10sp"><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="TextView案例"android:onClick="testOne"style="@style/myButton"/> <Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="EditTest案例"android:onClick="testTwo"style="@style/myButton"/><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button案例"android:onClick="testThree"style="@style/myButton"/><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="設置功能頁面案例"android:onClick="testFour"style="@style/myButton"/></LinearLayout> </LinearLayout>

一、手機拔號，郵箱發件，鏈接地址

只要在autoLink 這里設置 就可以使用了。

代碼：TestOneActivity.java

沒有什么代碼

package com.open_open.uizujian;import android.app.Activity; import android.support.v7.app.AppCompatActivity; import android.os.Bundle;public class TestOneActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_one);} }

頁面：activity_test_one

<?xml version="1.0" encoding="utf-8"?> <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"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="這是一個文本"android:background="@android:color/holo_blue_light"style="@style/myTextVied"/> <TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="中國移動：15999999999"android:autoLink="phone"style="@style/myTextVied"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="站長郵箱：1056596328@qq.com"android:autoLink="email"style="@style/myTextVied"/> <TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="有事找百度：https://baudi.com"android:autoLink="web"style="@style/myTextVied"/></LinearLayout>

二、這是一個稍微嚴格的注冊頁面，也比較人性化

用戶名獲取焦點的時候，自動切換全鍵盤26格，

輸入密碼 和年齡的 的時候：切換密碼9格鍵，輸入變點（年齡除外），

地址：考慮較長，設置多行顯示

并做了傳參，可接受輸入信息

TestTwoActivity.java

package com.open_open.uizujian;import android.app.Activity; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText;public class TestTwoActivity extends Activity {private EditText userName;private EditText userPwd;private EditText userAge;private EditText Name;private EditText userAddress;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_two);//初始化變量userName =(EditText) findViewById(R.id.userName);userPwd =(EditText) findViewById(R.id.userPwd);userAge =(EditText) findViewById(R.id.userAge);Name =(EditText) findViewById(R.id.Name);userAddress =(EditText) findViewById(R.id.userAddress);}public void zhuCe(View view){Intent intent = new Intent(this,TestTwo2Activity.class);intent.putExtra("userName", userName.getText().toString());intent.putExtra("userPwd", userPwd.getText().toString());intent.putExtra("userAge",userAge.getText().toString());intent.putExtra("Name",Name.getText().toString());intent.putExtra("userAddress",userAddress.getText().toString());startActivity(intent);} }
activity_test_two.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"> <TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="注冊頁面"style="@style/myTextVied"android:gravity="center"android:textColor="@color/colorAccent" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"> <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="用戶名："android:textSize="18sp"android:gravity="right"style="@style/myTextVied"/> <EditTextandroid:id="@+id/userName"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入用戶名"android:textColor="@android:color/holo_red_light"android:textSize="20sp"android:inputType="text"android:maxLength="12" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 密 碼："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/userPwd"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入密碼"android:maxLength="12"android:password="true"android:inputType="textPassword" /> </LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 名 稱："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/Name"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入名稱"android:textColor="@android:color/holo_red_light"android:textSize="20sp"android:inputType="text"android:maxLength="12" /></LinearLayout> <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"> <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 年 齡："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/userAge"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入年齡"android:maxLength="3"android:numeric="integer"android:inputType="number" /> </LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 地 址："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/userAddress"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入詳細地址"android:maxLength="500"android:lines="3"android:inputType="textMultiLine" /> </LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"> <Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="注冊"android:onClick="zhuCe"style="@style/myButton"/> </LinearLayout> </LinearLayout>

TestTwo2Activity.java package com.open_open.uizujian;import android.app.Activity; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.EditText;public class TestTwo2Activity extends Activity {private EditText userName;private EditText userPwd;private EditText Name;private EditText userAge;private EditText userAddress;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_two2);//初始化變量userName =(EditText) findViewById(R.id.userName);userPwd =(EditText) findViewById(R.id.userPwd);userAge =(EditText) findViewById(R.id.userAge);Name =(EditText) findViewById(R.id.Name);userAddress =(EditText) findViewById(R.id.userAddress);userName.setText(getIntent().getStringExtra("userName"));userPwd.setText(getIntent().getStringExtra("userPwd"));userAge.setText(getIntent().getStringExtra("userAge"));Name.setText(getIntent().getStringExtra("Name"));userAddress.setText(getIntent().getStringExtra("userAddress"));} }
activity_test_two2.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"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="恭喜你注冊成功！"style="@style/myTextVied"android:gravity="center"android:textColor="@color/colorAccent" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="用戶名："android:textSize="18sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/userName"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入用戶名"android:textColor="@android:color/holo_red_light"android:textSize="20sp"android:inputType="text"android:maxLength="12" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 密 碼："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/userPwd"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入密碼"android:maxLength="12" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 名 稱："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/Name"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入名稱"android:textColor="@android:color/holo_red_light"android:textSize="20sp"android:inputType="text"android:maxLength="12" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 年 齡："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/userAge"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入年齡"android:maxLength="3"android:numeric="integer"android:inputType="number" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" 地 址："android:textSize="20sp"android:gravity="right"style="@style/myTextVied"/><EditTextandroid:id="@+id/userAddress"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="請輸入詳細地址"android:maxLength="500"android:lines="3"android:inputType="textMultiLine" /></LinearLayout></LinearLayout>

三、Button 按鈕

圓形，復選框，普通按鈕，圖片按鈕

通過圖片按鈕可獲取值

TestThreeActivity.java

package com.open_open.uizujian;import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.CheckBox; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.RadioGroup.OnCheckedChangeListener; import android.widget.Toast;public class TestThreeActivity extends Activity {private RadioGroup rg;private CheckBox cb1,cb2,cb3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_three);cb1=(CheckBox)findViewById(R.id.cb1);cb2=(CheckBox)findViewById(R.id.cb2);cb3=(CheckBox)findViewById(R.id.cb3);rg=(RadioGroup)findViewById(R.id.rgsex);//監聽單選按鈕組事件rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {RadioButton rb=(RadioButton)findViewById(checkedId);Toast.makeText(TestThreeActivity.this,"你選擇了:"+rb.getText().toString(), 3000).show();}});}//取值[單選按鈕|復選框]public void getValues(View view){//單選按鈕RadioButton rb=(RadioButton)findViewById(rg.getCheckedRadioButtonId());StringBuffer sb=new StringBuffer();sb.append("性別:"+rb.getText().toString()+"\n");//復選框sb.append("愛好:");if(cb1.isChecked())sb.append(cb1.getText().toString()+",");if(cb2.isChecked())sb.append(cb2.getText().toString()+",");if(cb3.isChecked())sb.append(cb3.getText().toString()+",");Toast.makeText(this, sb.toString(), 5000).show();} }
activity_test_three.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"><Buttonandroid:id="@+id/btnOne"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="普通按鈕"style="@style/myButton"/><Viewandroid:layout_width="match_parent"android:layout_height="2sp"android:background="@android:color/holo_blue_dark" /><RadioGroupandroid:id="@+id/rgsex"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"> <RadioButtonandroid:id="@+id/sexOne"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="男"android:checked="true" /> <RadioButtonandroid:id="@+id/sexTwo"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="女" /></RadioGroup><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><CheckBoxandroid:id="@+id/cb1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="籃球"/> <CheckBoxandroid:id="@+id/cb2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="足球"/> <CheckBoxandroid:id="@+id/cb3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="羽毛球"/> </LinearLayout><ToggleButtonandroid:id="@+id/stateButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textOn="開燈"android:textOff="關燈"android:checked="true"/><ImageButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/tup"android:scaleType="fitXY"android:maxWidth="140dp"android:maxHeight="70dp"android:adjustViewBounds="true"android:onClick="getValues" /></LinearLayout>

四、

音量調整條（SeekBar），

下載進度條直線（ProgressBar），

加載進度條圓形（ProgressBar），

星星評價（RatingBar）

現在設定通過這個調整條 控制字體的大小

?

星星評價

點擊下載：

下載完成的提示：

?

TestFourActivity.java

package com.open_open.uizujian;import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ProgressBar; import android.widget.RatingBar; import android.widget.RatingBar.OnRatingBarChangeListener; import android.widget.SeekBar; import android.widget.SeekBar.OnSeekBarChangeListener; import android.widget.TextView; import android.widget.Toast;public class TestFourActivity extends Activity {private SeekBar sb;private TextView showText;private RatingBar rb;private ProgressBar pb3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_test_four);showText=(TextView)findViewById(R.id.showText);sb=(SeekBar)findViewById(R.id.seekBar);rb=(RatingBar)findViewById(R.id.ratingBar);pb3=(ProgressBar)findViewById(R.id.progressBar3);//為seekBar綁定事件sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {}@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {}@Overridepublic void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {//改變showText字體大小showText.setTextSize(progress);}});rb.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {@Overridepublic void onRatingChanged(RatingBar ratingBar, float rating,boolean fromUser) {Toast.makeText(TestFourActivity.this, "你選擇了"+rating+"星", 3000).show();}});}//開始下載[注意:除了ProgressBar外，所有的UI都必須在UI主線程中操作]boolean isRun=true;public void doStart(View view) throws Exception{isRun=true;//構建一個執行進度條變化的子線程new Thread(new Runnable() {@Overridepublic void run() {//耗時操作不能放在主線程中執行while(isRun){if(pb3.getProgress()<100){pb3.setProgress(pb3.getProgress()+1);try {Thread.sleep(50);} catch (InterruptedException e) {e.printStackTrace();}}else{isRun=false;//最簡單方法實現在多線程更新UIrunOnUiThread(new Runnable() {public void run() {Toast.makeText(TestFourActivity.this, "下載完畢",3000).show();}});}}}}).start();}//結束下載public void doStop(View view){isRun=false;}} activity_test_four.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"><TextViewandroid:id="@+id/showText"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="我是一個TextView"style="@style/myTextVied"/><SeekBarandroid:id="@+id/seekBar"android:layout_width="match_parent"android:layout_height="wrap_content"android:max="50"android:progress="20"/><RatingBarandroid:id="@+id/ratingBar"android:layout_width="wrap_content"android:layout_height="wrap_content"android:numStars="5"android:rating="1"android:stepSize="1" /><ProgressBarandroid:id="@+id/progressBar"android:layout_width="match_parent"android:layout_height="wrap_content"android:max="100"android:progress="10"/> <ProgressBarandroid:id="@+id/progressBar2"android:layout_width="match_parent"android:layout_height="wrap_content"android:max="100"android:progress="10"style="?android:attr/progressBarStyleLarge"/> <ProgressBarandroid:id="@+id/progressBar3"android:layout_width="match_parent"android:layout_height="wrap_content"android:max="100"android:progress="10"style="?android:attr/progressBarStyleHorizontal"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><Buttonandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="wrap_content"android:text="開始"android:onClick="doStart"/> <Buttonandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="wrap_content"android:text="結束"android:onClick="doStop"/></LinearLayout></LinearLayout>
五、mystyle自定義樣式 還有補充： <?xml version="1.0" encoding="utf-8"?> <resources><style name="myButton" parent="android:Widget.Button"><item name="android:textSize">28sp</item><item name="android:textColor">@color/colorPrimary</item><item name="android:layout_marginTop">5sp</item><item name="android:gravity">center</item><item name="android:layout_margin">5sp</item></style><style name="myTextVied" parent="android:Widget.TextView"><item name="android:textSize">28sp</item><item name="android:textColor">@color/test_hui</item><item name="android:layout_marginTop">10sp</item><item name="android:gravity">left</item><item name="android:layout_margin">5sp</item></style><style name="myEditText" parent="android:Widget.EditText"><item name="android:textSize">28sp</item><item name="android:textColor">@color/test_blue</item><item name="android:layout_marginTop">10sp</item><item name="android:gravity">left</item><item name="android:layout_margin">5sp</item></style> </resources>
color.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="test_blue">#00A2E3</color> <color name="test_green">#00FF00</color> <color name="test_hui">#666666</color> </resources> 圖片：tup.jpg,大家自己找一張吧

總結

以上是生活随笔為你收集整理的【Android初学者】UI组件 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。