张知

导航

安卓开发:UI组件-Button和EditText

2.3Button

Button继承自TextView,除了通过属性设置按钮样式,还可以通过绑定drawable文件的方式来实现不同样式。

2.3.1按钮样式

新建Activity:ButtonActivity,添加Layout视图:activity_button.xml.

activity_button.xml:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:padding="15dp">
 6     <Button
 7         android:id="@+id/btn_1"
 8         android:layout_width="match_parent"
 9         android:layout_height="40dp"
10         android:text="普通按钮"
11         android:textSize="20sp"
12         android:textColor="#ffffff"
13         android:background="#000000"
14         android:layout_marginTop="10dp"/>
15     <Button
16         android:id="@+id/btn_2"
17         android:layout_width="match_parent"
18         android:layout_height="40dp"
19         android:text="圆角按钮"
20         android:textSize="20sp"
21         android:textColor="#ffffff"
22         android:background="@drawable/bg_btn1"
23         android:layout_below="@id/btn_1"
24         android:layout_marginTop="10dp"/>
25     <Button
26         android:id="@+id/btn_3"
27         android:layout_width="357dp"
28         android:layout_height="wrap_content"
29         android:layout_below="@+id/btn_2"
30         android:layout_marginTop="10dp"
31         android:background="@drawable/bg_btn2"
32         android:text="描边按钮"
33         android:textColor="#ff9900"
34         android:textSize="20sp" />
35     <Button
36         android:id="@+id/btn_4"
37         android:layout_width="357dp"
38         android:layout_height="wrap_content"
39         android:layout_below="@+id/btn_3"
40         android:layout_marginTop="10dp"
41         android:background="@drawable/bg_btn3"
42         android:text="按压效果"
43         android:textColor="#ffffff"
44         android:textSize="20sp" />
45 
46 </RelativeLayout>

通过如下方式添加drawable文件(复制粘贴普通xml文件由于路径不同会导致引用出现问题):

bg_btn1.xml(圆角按钮)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
    android:color="#ff9900"/>
<corners
    android:radius="50dp"/>
</shape>

bg_btn2.xml(描边按钮)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#ff9900"/>
    <corners
        android:radius="15dp"/>
</shape>

bg_btn3.xml(按压效果)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#DBA047"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#FF9900"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

 2.3.2点击事件

在Layout文件的32行做如下改动,绑定showToast事件:

32         android:text="描边按钮+点击1"
33         android:onClick="showToast"

来到Activity文件为此事件进行详细描述:

public void showToast(View view){
        Toast.makeText(this,"btn3",Toast.LENGTH_SHORT).show();
    }

或者也可以使用第二种方法实现点击,修改Layout文件42行为:

42 android:text="按压效果+点击2"

因为此点击事件绑定了按钮4,btn4,来到Activity文件定义私有变量mBtn4,完善事件描述:

private Button mBtn4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_button);
        mBtn4 = findViewById(R.id.btn_4);
        mBtn4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ButtonActivity.this,"btn4",Toast.LENGTH_SHORT).show();
            }
        });
    }

 最后效果:

 

2.4EditText

同Button一样,继承自TextView。接下来通过制作一个登录界面的方式来学习。

打开MainActivity增加私有控件mBtnEditText:

private Button mBtnEditText;

在onCreate里补全内容,绑定EditTextActivit,跳转至activity_edit_text.xml。

mBtnEditText = findViewById(R.id.btn_edittext);
        mBtnEditText.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                //跳转到EditText演示界面
                Intent intent = new Intent(MainActivity.this,EditTextActivity.class);
                startActivity(intent);

            }
        });

同时,在首页增加一个导向此页面的按钮:

<Button
        android:id="@+id/btn_edittext"
        android:layout_width="match_parent"
        android:layout_height="61dp"
        android:text="EditText"
        android:textAllCaps="false"/> //加了一个属性:默认不全显示大写

activity_edit_text.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp">

    <EditText
        android:id="@+id/et_1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="19dp"
        android:background="@drawable/bg_username" //新建Drawable resourse file,给文字处设置一个圆角线框。
        android:hint="手机号" //添加导引文字。
        android:inputType="number" //此处说明了输入内容的类型,由于是手机号,所以默认为数字(见效果图),还有其他效果,可以自己尝试
        android:paddingLeft="10dp" //图标左侧与边框的距离。
android:textColor
="#000000" android:textSize="16sp" android:drawableLeft="@drawable/icon_user" //在“手机号”前加一个小图标。 android:drawablePadding="8dp" //设置图标与文字之间的间距。 android:maxLines="1"/> //设置最大行数。 <EditText android:id="@+id/et_2" android:layout_width="match_parent" android:layout_height="50dp" android:textSize="16sp" android:textColor="#000000" android:hint="密码" android:inputType="textPassword" //同样,设置输入内容的类型为密码,所以输入完成后为暗文(见效果图) android:layout_below="@id/et_1" android:layout_marginTop="15dp" android:background="@drawable/bg_username" android:paddingLeft="10dp" android:drawableLeft="@drawable/icon_psw" android:drawablePadding="8dp" android:maxLines="1" /> <Button android:id="@+id/btn_login" android:layout_width="match_parent" android:layout_height="40dp" android:layout_below="@id/et_2" android:layout_marginTop="40dp" android:background="@drawable/bg_login" android:textColor="#fff" android:text="登录" android:textSize="18sp"/> </RelativeLayout>

最后,在EditTextActivity为”登录“按钮添加绑定的点击事件。

增加私有控件:

private Button mBtnLogin;

完善信息:

mBtnLogin = findViewById(R.id.btn_login);
        mBtnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(EditTextActivity.this,"登录成功!",Toast.LENGTH_SHORT).show();
            }
        });

 

效果图:

在手机号一行默认输入数字;密码为暗文;点击登录后跳出登录成功的提示。

 

posted on 2019-01-23 23:39  张知  阅读(1014)  评论(0编辑  收藏  举报