1.形状图形(shape)
形状图形的定义文件是以shape标签问根节点的XML描述文件,它支持四种类型的形状;
- rectangle:矩形。默认值
- oval:椭圆。此时corners节点会失效
- line:直线。此时必须设置stroke节点,不然会报错
- ring:圆环
代码示例
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--定义内部填充颜色-->
<solid android:color="#ffdd66"/>
<!--指定了形状四个圆角的半径-->
<corners android:radius="10dp"/>
<!--指定了形状轮廓的颜色和粗细-->
<stroke android:width="1dp"
android:color="#aaaaaa"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#ff66aa"/>
<stroke android:width="1dp"
android:color="#aaaaaa"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="@+id/v_content"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn_rect"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="圆角矩形背景"/>
<Button
android:id="@+id/btn_oval"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="椭圆背景"/>
</LinearLayout>
</LinearLayout>
public class DrawableShapeActivity extends AppCompatActivity implements View.OnClickListener {
private View v_content;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawable_shape);
v_content = findViewById(R.id.v_content);
findViewById(R.id.btn_rect).setOnClickListener(this);
findViewById(R.id.btn_oval).setOnClickListener(this);
v_content.setBackgroundResource(R.drawable.shape_rect_gold);
}
@Override
public void onClick(View v) {
if(v.getId()==R.id.btn_rect){
v_content.setBackgroundResource(R.drawable.shape_rect_gold);
}else{
v_content.setBackgroundResource(R.drawable.shape_oval_rose);
}
}
}
结果显示
2 属性说明
2.1 shape(形状)
2.2 size(尺寸)
- height:像素类型,图形高度
- width:像素类型,图形宽度
2.3 stroke(描边)
- color:颜色类型,描边的颜色。
- dashGap:像素类型,每段虚线之间的间隔。
- dashWidth:像素类型,每段虚线的宽度。若dashGap和dashWidth,有一个值为0则描边为实线。
- width:像素类型,描边的后度
2.4 corners(圆角)
- bottomLeftRadius:像素类型,左下圆角的半径
- bottomRightRadius:像素类型,右下圆角的半径
- topLeftRadius:像素类型,左上圆角的半径
- topRightRadius:像素类型,右上圆角的半径
- radius:像素类型,4个圆角的半径
2.5 solid(填充)
- color:颜色类型,内部填充的颜色
2.6 padding(间隔)
- top:像素类型,与上方的间隔
- bottom:像素类型,与下方的间隔
- left:像素类型,与左边的间隔
- right:像素类型,与右边的间隔
2.7 gradient(渐变)
- angle:整形,渐变的起始角度。为0时表示时钟9点的位置,值增大表示往逆时针方向旋转。例如,值为90表示6点的位置,值为180表示3点的位置,值为270表示0点/12点位置
- type:字符串类型,渐变类型(详情见下表)
- centerX:浮点型,圆心X的坐标。
- centerY:浮点型,圆心Y的坐标。
- gradientRadius:整形,渐变的半径,当android:type="radial"时需要设置该属性
- centerColor:颜色类型,渐变的中间颜色
- startColor:颜色类型,渐变的起始颜色
- endColor:颜色类型,渐变的终止类型。
- useLevel:布尔类型,设置为true为无渐变色,false为有渐变色。
3. 状态列表图形
Button按钮的背景在正常的情况下是凸起的,在按下时是凹陷的,从按下到弹起的过程,用户便能知道点击了这个按钮。
代码演示
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>
<item android:drawable="@drawable/button_normal"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:padding="5dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/btn_nine_selector"
android:text="定制样式的按钮"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:padding="5dp"
android:text="默认样式的按钮"/>
</LinearLayout>
状态列表不仅用于按钮控件,还可以用于其他拥有多种状态的控件
4. 复选框(checkBox)
4.1 CompoundButton
CompoundButton是抽象的复合按钮,不能直接使用。实际开发主要使用CompoundButton的几个派生类。
4.2 CompoundButton在xml文件中主要使用下面两个属性。
- checked:指定按钮的勾选状态,true表示勾选,false则表示未勾选。默认为未勾选。
- button:指定左侧勾选图标的图形资源,如果不指定就使用系统的默认图标。
4.3 CompoundButton在java代码中的主要使用方法。
- setChecked:设置按钮的勾选状态。
- setButtonDrawable:设置左侧勾选图标的图形资源。
- setOnCheckedChangeListener:设置勾选状态变化的监听器。
- isChecked:判断按钮是否勾选。
5. 开关按钮(Switch)
xml文件属性说明
- textOn:设置右侧开启时的文本。
- textOff:设置左侧关闭时的文本。
- track:设置开关轨道的背景。
- thumb:设置开关标识的图标。
代码示例
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Switch开关: "
android:layout_gravity="start"/>
<CheckBox
android:id="@+id/ck_status"
android:layout_width="60dp"
android:layout_height="30dp"
android:button="@null"
android:background="@drawable/switch_selector"
android:layout_gravity="end"/>
</LinearLayout>
<TextView
android:id="@+id/tv_resut"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_gravity="start"
/>
</LinearLayout>
public class SwitchIOSActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
private TextView tv_result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_switch_iosactivity);
CheckBox ck_status=findViewById(R.id.ck_status);
tv_result = findViewById(R.id.tv_resut);
ck_status.setOnCheckedChangeListener(this);
}
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
String desc=String.format("开关状态:%s",b?"打开":"关闭");
tv_result.setText(desc);
}
}
结果显示
6. 单选按钮(RadioButton)
RadioGroup实质是个布局,同一组RadioButton都要放在同一个RadioGroup节点下。
除了RadioButton,也允许放置其他控件。
代码示例
public class RadioHorizontalActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private TextView tv_result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_radio_horizontal);
RadioGroup rb_gender = findViewById(R.id.rg_gender);
tv_result = findViewById(R.id.tv_result);
rb_gender.setOnCheckedChangeListener(this);
}
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
if(checkedId==R.id.rb_male){
tv_result.setText("男孩");
}else if(checkedId==R.id.rb_female){
tv_result.setText("女孩");
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
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="请选择你的性别: " />
<RadioGroup
android:id="@+id/rg_gender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_female"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="女" />
<RadioButton
android:id="@+id/rb_male"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="男" />
</RadioGroup>
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginTop="10dp" />
</LinearLayout>
7. 编辑框
- maxLength:指定提示文本的内容。
- hnit:指定提示文本的内容。
- textColorHint:指定提示文本的颜色。
- 输入类型(inputType)
代码示例
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
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="下面是登录信息"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:hint="请输入用户名"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="请输入密码"/>
</LinearLayout>
public class EditSimpleActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_edit_simple);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
}
}
结果显示
8. 监听焦点变更事件的演示效果
代码示例
public class EditFocusActivity extends AppCompatActivity implements View.OnFocusChangeListener {
private EditText et_phone;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_edit_focus);
et_phone = findViewById(R.id.et_phone);
EditText et_password = findViewById(R.id.et_password);
et_password.setOnFocusChangeListener(this);
}
@Override
public void onFocusChange(View v, boolean hasFocus) {
if(hasFocus){
String phone = et_phone.getText().toString();
if(TextUtils.isEmpty(phone) || phone.length()<11){
//手机号码编辑框请求焦点,也就是把光标移回手机号码编辑框
et_phone.requestFocus();
Toast.makeText(this,"请输入11位手机号码",Toast.LENGTH_SHORT).show();
}
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/et_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="11"
android:background="@drawable/editext_selector"
android:hint="请输入用户名"/>
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberPassword"
android:maxLength="6"
android:background="@drawable/editext_selector"
android:hint="请输入密码"/>
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登录"/>
</LinearLayout>
9. 监听文本位数自动关闭软键盘的演示效果
代码示例
public class ViewUtil {
public static void hideOneInputMethod(Activity act, View v){
InputMethodManager imm = (InputMethodManager) act.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(v.getWindowToken(), 0);
}
}
public class EditHideActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_edit_hide);
EditText et_phone = findViewById(R.id.et_phone);
EditText et_password = findViewById(R.id.et_password);
et_phone.addTextChangedListener(new HideTextWatcher(et_phone,11));
et_phone.addTextChangedListener(new HideTextWatcher(et_password,6));
}
private class HideTextWatcher implements TextWatcher{
private EditText mView;
private int mMaxLength;
public HideTextWatcher(EditText v,int maxLength){
this.mView = v;
this.mMaxLength = maxLength;
}
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
//编辑框的输入文本变化后触发
@Override
public void afterTextChanged(Editable s) {
String str = s.toString();
if(str.length()==mMaxLength){
ViewUtil.hideOneInputMethod(EditHideActivity.this,mView);
}
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/et_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="11"
android:background="@drawable/editext_selector"
android:hint="输入11位时自动隐藏输入法"
/>
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberPassword"
android:maxLength="6"
android:background="@drawable/editext_selector"
android:hint="输入6位时自动隐藏输入法"/>
</LinearLayout>