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 {
@Override
protected 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10sp">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView案例"
android:onClick="testOne"
style="@style/myButton"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EditTest案例"
android:onClick="testTwo"
style="@style/myButton"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button案例"
android:onClick="testThree"
style="@style/myButton"/>
<Button
android: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 { @Override protected 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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="这是一个文本"
android:background="@android:color/holo_blue_light"
style="@style/myTextVied"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="中国移动:
15999999999"
android:autoLink="phone"
style="@style/myTextVied"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="站长邮箱:
1056596328@qq.com"
android:autoLink="email"
style="@style/myTextVied"/>
<TextView
android: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;
@Override
protected 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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="注册页面"
style="@style/myTextVied"
android:gravity="center"
android:textColor="@color/colorAccent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名:"
android:textSize="18sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 密 码:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 名 称:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 年 龄:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 地 址:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android: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;
@Override
protected 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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="恭喜你注册成功!"
style="@style/myTextVied"
android:gravity="center"
android:textColor="@color/colorAccent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="用户名:"
android:textSize="18sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 密 码:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android:id="@+id/userPwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:maxLength="12" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 名 称:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 年 龄:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 地 址:"
android:textSize="20sp"
android:gravity="right"
style="@style/myTextVied"/>
<EditText
android: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;
@Override
protected 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() {
@Override
public 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">
<Button
android:id="@+id/btnOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="普通按钮"
style="@style/myButton"/>
<View
android:layout_width="match_parent"
android:layout_height="2sp"
android:background="@android:color/holo_blue_dark" />
<RadioGroup
android:id="@+id/rgsex"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/sexOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:checked="true" />
<RadioButton
android:id="@+id/sexTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女" />
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="篮球"/>
<CheckBox
android:id="@+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="足球"/>
<CheckBox
android:id="@+id/cb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="羽毛球"/>
</LinearLayout>
<ToggleButton
android:id="@+id/stateButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="开灯"
android:textOff="关灯"
android:checked="true"/>
<ImageButton
android: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; @Override protected 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() { @Override public void onStopTrackingTouch(SeekBar seekBar) { } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { //改变showText字体大小 showText.setTextSize(progress); } }); rb.setOnRatingBarChangeListener(new OnRatingBarChangeListener() { @Override public 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() { @Override public 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; //最简单方法实现在多线程更新UI runOnUiThread(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"> <TextView android:id="@+id/showText" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="我是一个TextView" style="@style/myTextVied"/> <SeekBar android:id="@+id/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="50" android:progress="20"/> <RatingBar android:id="@+id/ratingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" android:rating="1" android:stepSize="1" /> <ProgressBar android:id="@+id/progressBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="100" android:progress="10" /> <ProgressBar android:id="@+id/progressBar2" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="100" android:progress="10" style="?android:attr/progressBarStyleLarge" /> <ProgressBar android:id="@+id/progressBar3" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="100" android:progress="10" style="?android:attr/progressBarStyleHorizontal" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:layout_width="0dp" android:layout_weight="1" android:layout_height="wrap_content" android:text="开始" android:onClick="doStart"/> <Button android: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,大家自己找一张吧