Android UI(Button)详解

来源：互联网发布：mysql读写分离原理编辑：程序博客网时间：2024/05/22 05:08

目录：
1.Button点击事件
1.1 xml中实现onClick属性（不常用）
1.2 创建匿名内部类
1.3 继承OnClickListener接口
1.4 内部类实现OnClickListener接口

2.Button基础样式设置
2.1 背景
2.2 按钮文字阴影
2.3 设置图文混合按钮
2.4 设置按钮阴影
2.5 案例

3.Button不同状态样式设置
3.1 Button的状态分类
3.2 通过多张9.png格式图片实现
3.3 通过shape绘制Button实现

4.ImageButton,ImageView,Button对比
4.1 相同点
4.2 不同点

1.Button点击事件
1.1 xml中实现onClick属性（不常用）

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.andy.androiduibutton.MainActivity" >        <Button            android:id="@+id/button1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:onClick="setClickmethod"            android:text="@string/xml_click_text" />    </LinearLayout>

java代码：

    package com.andy.androiduibutton;    import android.app.Activity;    import android.os.Bundle;    import android.view.Menu;    import android.view.MenuItem;    import android.view.View;    import android.view.View.OnClickListener;    import android.widget.Button;    import android.widget.Toast;    public class MainActivity extends Activity {         private Button button1;        @Override        protected void onCreate(Bundle savedInstanceState) {            super.onCreate(savedInstanceState);            setContentView(R.layout.activity_main);            //可不绑定布局            button1 = (Button) findViewById(R.id.button1);        }        //setClickmethod与onClick="setClickmethod"属性值一致，并保证方法接收View参数        public void setClickmethod(View view){                     Toast.makeText(this, "xml，onClick属性设置点击响应", Toast.LENGTH_SHORT).show();        }    }

1.2 创建匿名内部类

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.andy.androiduibutton.MainActivity" >        <Button            android:id="@+id/button2"            style="?android:attr/buttonStyleSmall"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/java_click_text" />    </LinearLayout>

Java代码：

    package com.andy.androiduibutton;    import android.app.Activity;    import android.os.Bundle;    import android.view.Menu;    import android.view.MenuItem;    import android.view.View;    import android.view.View.OnClickListener;    import android.widget.Button;    import android.widget.Toast;    public class MainActivity extends Activity {         private Button button2;        @Override        protected void onCreate(Bundle savedInstanceState) {            super.onCreate(savedInstanceState);            setContentView(R.layout.activity_main);            button2 = (Button) findViewById(R.id.button2);            button2.setOnClickListener(new OnClickListener() {                                @Override                public void onClick(View v) {                    Toast.makeText(MainActivity.this, "java匿名内部类实现点击监听响应", Toast.LENGTH_SHORT).show();                }            });        }    }

1.3 继承OnClickListener接口
xml布局：同1.2

Java代码：

    package com.andy.androiduibutton;    import android.app.Activity;    import android.os.Bundle;    import android.view.Menu;    import android.view.MenuItem;    import android.view.View;    import android.view.View.OnClickListener;    import android.widget.Button;    import android.widget.Toast;    public class MainActivity extends Activity implements OnClickListener {         private Button button2;        @Override        protected void onCreate(Bundle savedInstanceState) {            super.onCreate(savedInstanceState);            setContentView(R.layout.activity_main);            button2 = (Button) findViewById(R.id.button2);            //button1 = (Button) findViewById(R.id.button1);            button2.setOnClickListener(this);        }        @Override        public void onClick(View v) {            Toast.makeText(MainActivity.this, "java继承OnClickListener接口实现点击监听响应", Toast.LENGTH_SHORT).show();        }    }

1.4 内部类实现OnClickListener接口
xml布局：同1.2

Java代码：

    package com.andy.androiduibutton;    import android.app.Activity;    import android.os.Bundle;    import android.view.Menu;    import android.view.MenuItem;    import android.view.View;    import android.view.View.OnClickListener;    import android.widget.Button;    import android.widget.Toast;    public class MainActivity extends Activity  {         private Button button1;         private Button button2;        @Override        protected void onCreate(Bundle savedInstanceState) {            super.onCreate(savedInstanceState);            setContentView(R.layout.activity_main);            button2 = (Button) findViewById(R.id.button2);            button2.setOnClickListener(new MyOnClickLisener());        }         /*          * MainActivity类的内部类继承OnClickListener接口实现点击监听          */         class MyOnClickLisener implements OnClickListener{            @Override            public void onClick(View v) {                Toast.makeText(MainActivity.this, "Java内部类继承OnClickListener接口实现点击监听响应", Toast.LENGTH_SHORT).show();            }           }    }

2.Button基础样式设置（一些主要的基础样式）
2.1 背景：android:background="#7EC0EE"

2.2 按钮文字阴影
android:shadowColor="#FFAEB9"//设置文字阴影颜色
android:shadowRadius="10"//设置阴影大小，值越大越模糊
android:shadowDx="10"//设置阴影水平偏移量
android:shadowDy="10"//设置阴影垂直偏移量

2.3 设置图文混合按钮
android:drawableTop="@drawable/ic_launcher"//图片在上文字在下
android:drawableBottom=""//图片在下文字在上
android:drawableLeft=""//图片在左文字在右
android:drawableRight=""//图片在右文字在左
android:drawableStart=""//图片在左文字在右
android:drawableEnd=""//图片在右文字在左

2.4 设置按钮阴影（android 5.0特性）--按钮具有立体感
android:elevation="1dip"

2.5 案例：

      <Button        android:id="@+id/button1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#7EC0EE"        android:shadowColor="#FFAEB9"        android:padding="4dp"        android:layout_margin="10dp"        android:shadowRadius="10"        android:shadowDx="10"        android:shadowDy="10"        android:text="@string/xml_click_text" />

截图：

3.Button不同状态样式设置
3.1 Button的状态分类
1)normal
2)pressed
3)focused

3.2 通过多张9.png格式图片实现
1)导入制作好的图片
2)img_bg_selector.xml

    <?xml version="1.0" encoding="utf-8"?>    <selector xmlns:android="http://schemas.android.com/apk/res/android" >        <item android:state_focused="true"            android:drawable="@drawable/ic_launcher"></item>        <item android:state_pressed="true"            android:drawable="@drawable/button"></item>        <item android:drawable="@drawable/back"></item>    </selector>

3)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.andy.androiduibutton.MainActivity" >                        <Button            android:id="@+id/button4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:padding="5dp"            android:layout_margin="10dp"            android:background="@drawable/img_bg_selector"            android:text="@string/text4" />    </LinearLayout>

3.3 通过shape绘制Button实现
1)shape绘制不同状态button样式

  normal_button.xml    <?xml version="1.0" encoding="utf-8"?>    <shape xmlns:android="http://schemas.android.com/apk/res/android" >        <!-- 设置button圆角为5dp -->        <corners android:radius="5dp"/>        <!-- 绘制填充色 -->        <solid android:color="#EEA2AD"/>        <!-- 绘制边线 -->        <stroke android:width="2dp"            android:color="#EEE0E5"/>        <!-- 设置文本与按钮的内边距 -->        <padding android:left="5dp"            android:top="5dp"            android:right="5dp"            android:bottom="5dp"            />    </shape>

focused_button.xml

    <?xml version="1.0" encoding="utf-8"?>    <shape xmlns:android="http://schemas.android.com/apk/res/android" >        <!-- 设置button圆角为5dp -->        <corners android:radius="5dp"/>        <!-- 绘制填充色 -->        <solid android:color="#6CA6CD"/>        <!-- 绘制边线 -->        <stroke android:width="2dp"            android:color="#40E0D0"/>        <!-- 设置文本与按钮的内边距 -->        <padding android:left="5dp"            android:top="5dp"            android:right="5dp"            android:bottom="5dp"            />    </shape>

pressed_button.xml

    <?xml version="1.0" encoding="utf-8"?>    <shape xmlns:android="http://schemas.android.com/apk/res/android" >        <!-- 设置button圆角为5dp -->        <corners android:radius="5dp"/>        <!-- 绘制填充色 -->        <solid android:color="#79CDCD"/>        <!-- 绘制边线 -->        <stroke android:width="2dp"            android:color="#40E0D0"/>        <!-- 设置文本与按钮的内边距 -->        <padding android:left="5dp"            android:top="5dp"            android:right="5dp"            android:bottom="5dp"            />    </shape>

2)bg_selecter.xml

    <?xml version="1.0" encoding="utf-8"?>    <selector xmlns:android="http://schemas.android.com/apk/res/android" >        <item android:state_focused="true"            android:drawable="@drawable/focused_button"></item>        <item android:state_pressed="true"            android:drawable="@drawable/pressed_button"></item>        <item android:drawable="@drawable/normal_button"></item>    </selector>

3)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.andy.androiduibutton.MainActivity" >                    <Button            android:id="@+id/button3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/bg_selector"            android:text="@string/text3" />    </LinearLayout>

3.4 效果截图

4.ImageButton,ImageView,Button对比
4.1 相同点
1)同样可以用android:background=””设置背景图片/颜色
2)同样拥有事件监听与响应功能

4.2 不同点
1)Button可以通过android:text=””属性设置文本，而其他二者不能
2)ImageButton,ImageView可以通过android:src=””属性指定图片资源，而Button不能
3)Button，ImageButton某些监听事件ImageView没有

0 0