移动设备软件开发-4

1.简介

1.需要学习的内容

• checkBox：多选按钮

• ImageView：放图片

• RadioGroup：单选按钮组

• ProgressBar：进度条

2.以上标签的案例

2.1checkBox

checkBox的事件用OnCheckedChangeListener()监听

1.案例

效果图：

 

第一步：创建布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity3">
​
<!--  check1-->
  <CheckBox
      android:id="@+id/check1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="篮球"
    />
  <!--  check2-->
  <CheckBox
      android:id="@+id/check2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="足球"
      />
  <!--  check3-->
  <CheckBox
      android:id="@+id/check3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="网球"
      />
​
  <!--  check4-->
  <CheckBox
      android:id="@+id/check4"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="排球"
      />
<!--  用于提交-->
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="点我显示内容"
      />
  <Button
      android:id="@+id/btn2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="点我删除内容"
      />
<!--用于显示提交的内容-->
      <TextView
          android:id="@+id/text1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text=""
        />
​
​
</LinearLayout>

Actity代码：

public class MainActivity3 extends AppCompatActivity {
//    定义控件元素
    CheckBox check1=null;
    CheckBox check2=null;
    CheckBox check3=null;
    CheckBox check4=null;
    Button btn=null;
    Button btn2=null;
    TextView text1=null;
    String str="";
​
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
//获取控件对象
        check1=this.findViewById(R.id.check1);
        check2=this.findViewById(R.id.check2);
        check3=this.findViewById(R.id.check3);
        check4=this.findViewById(R.id.check4);
        btn=this.findViewById(R.id.btn);
        btn2=this.findViewById(R.id.btn2);
        text1=this.findViewById(R.id.text1);
//        创建各个控件的事件监听
        check1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
​
                if (check1.isChecked()){
                    if (str.indexOf(check1.getText().toString())==-1){
                        str=str+check1.getText();
                    }
                }
                else
                {
                    str="";
                }
            }
        });
        check2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if (check2.isChecked()){
                    str=str+check2.getText();
                }
                else
                {
                    str="";
                }
            }
        });
        check3.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if (check3.isChecked()){
                    str=str+check3.getText();
                }
                else
                {
                    str="";
                }
            }
        });
        check4.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if (check4.isChecked()){
                    str=str+check4.getText();
                }
                else
                {
                    str="";
                }
            }
        });
​
//        设置btn的事件监听
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (str!=null){
                    text1.setText(str);
                }
            }
        });
//         删除内容
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                    str="";
                    text1.setText(str);
​
            }
        });
    }
​
​
}

2.2ImageView

1.是一个图片控件，可以显示图片。需要设置三个属性

• 长宽比

• 长度

• 宽度

• src指定图片的位置

2.案例

效果图：

• android:adjustViewBounds="true"用来显示长短比

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/test2"
    android:maxHeight="500dp"
    android:maxWidth="500dp"
    android:adjustViewBounds="true"
    />

外加一句：

• 控件在父控件的中间显示

android:layout_gravity="center"

效果图：

2.3RadioGroup

1.案例-xx消息主界面

效果图：

第一步：value中添加相应的颜色信息

<color name="c1">#2a96d4</color>
<color name="c2">#aab3b8</color>

第二步：drawable中添加布局信息

• changecolor.xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--    按下去的界面-->
<item android:state_checked="true" android:drawable="@color/c1"/>
<!--    抬起时的界面-->
<item android:state_checked="false" android:drawable="@color/c2"/>
</selector>

第三步：编写布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity5">
<!--    标识当前显示的是什么页面-->
    <TextView
        android:id="@+id/text5"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="当前的页面是首页哦!"
        android:textStyle="bold"
        android:textSize="30dp"
        />
​
​
<!--    单选按钮-->
    <RadioGroup
    android:id="@+id/g1"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="horizontal"
​
    >
<!--    r1-->
    <RadioButton
        android:id="@+id/r1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:text="首页"
        android:height="45dp"
        android:textSize="30dp"
        android:button="@null"
        android:gravity="center"
        android:checked="true"
        android:background="@drawable/changecolor"
        />
    <!--    r2-->
    <RadioButton
        android:id="@+id/r2"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:text="联系人"
        android:height="45dp"
        android:textSize="30dp"
        android:button="@null"
        android:gravity="center"
        android:background="@drawable/changecolor"
        />
​
    <!--    r3-->
    <RadioButton
        android:id="@+id/r3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:height="45dp"
        android:textSize="30dp"
        android:text="空间"
        android:button="@null"
        android:gravity="center"
        android:background="@drawable/changecolor"
        />
​
</RadioGroup>
</LinearLayout>

第四步：编写监听器

public class MainActivity5 extends AppCompatActivity {
​
    TextView text5=null;
    RadioGroup g1=null;
    RadioButton r1=null;
    RadioButton r2=null;
    RadioButton r3=null;
​
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main5);
//      获取各个对象
        g1=this.findViewById(R.id.g1);
        r1=this.findViewById(R.id.r1);
        r2=this.findViewById(R.id.r2);
        r3=this.findViewById(R.id.r3);
        text5=this.findViewById(R.id.text5);
​
//       设置监听器
        g1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
              if (r1.isChecked()){
                  text5.setText("当前的页面是首页!");
              }
                if (r2.isChecked()){
                    text5.setText("当前的页面是联系人!");
                }
                if (r3.isChecked()){
                    text5.setText("当前的页面是空间!");
                }
​
            }
        });
​
    }
}

运行界面：

2.4ImageButton

1.和button的效果是一样的，但是不能显示文字只能显示图片。

2.下载图表的案例：点击一下Toast提示开始下载！

效果图：

 

第一步：导入下载的图表到mipmap

第二步：编写布局文件

• 需要引入src

<ImageButton
    android:id="@+id/imageBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/download"
    android:layout_gravity="center"
    android:adjustViewBounds="true"
    />

第三步：编写Activity

• 监听的方式和Button一样

//测试ImageButton
public class MainActivity6 extends AppCompatActivity {
    ImageButton btn=null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main6);
//      获取对象
        btn=findViewById(R.id.imageBtn);
//        创建监听器
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast toast=Toast.makeText(MainActivity6.this, "开始下载！", Toast.LENGTH_SHORT);
                toast.setGravity(Gravity.CENTER,0,0);
                toast.show();
            }
        });
​
    }
}

第四步：引入一个好看的drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--    按下去的界面-->
<item android:state_pressed="true" android:drawable="@color/c1"/>
<!--    抬起时的界面-->
<item android:state_pressed="false" android:drawable="@color/white"/>
</selector>

2.5ProgressBar

1.ProgressBar：进度条。

2.常见的属性：

• android:max，最大值

• android:proress，第一进度值

• android:secondprogress，第二进度值

• android:interminate，是否精确显示

3.Activity中的关键方法

• setprogress，设置第一进度

• setsecondprogress，设置第二进度

• getprogress，获取第一进度

• getsecondprogress，获取第二进度

• incrementprogressby，增减第一进度

• incrementsecondprogressby，增减第二进度

• getmax，获取最大值

2.案例：增减进度条

效果图：

 

第一步：创建布局文件：

• 创建一个进度条和两个按钮。至于效果图中的圆形进度条忽略就行。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity7">

​

<!--  换种布局方式就可以实现两边显示  -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
       >
        <Button
            android:id="@+id/p1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:text="点我进度条+"
​
            />
​
        <Button
            android:id="@+id/p2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:text="点我进度条-"
            />
    </FrameLayout>
​
<!--    进度条-->
    <ProgressBar
        android:id="@+id/pro1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:progress="60"
        />
​
    <ProgressBar
        android:id="@+id/pro2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="10"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:max="100"
        android:padding="10dp"
        />
​
</LinearLayout>

第二步：创建Activity

• 需要编写两个监听器

public class MainActivity7 extends AppCompatActivity {
    ProgressBar progressBar=null;
    Button button=null;
    Button button2=null;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main7);
//  获取对象
        progressBar=findViewById(R.id.pro2);
        button=findViewById(R.id.p1);
        button2=findViewById(R.id.p2);
//        创建监听器
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (progressBar.getProgress()<100){
                    System.out.println(progressBar.getProgress());
                    progressBar.setProgress(progressBar.getProgress()+10);
                    //                显示提示信息
                    Toast.makeText(MainActivity7.this, "进度条+10", Toast.LENGTH_SHORT).show();
                }
                else
                {
                    Toast.makeText(MainActivity7.this, "当前进度为100", Toast.LENGTH_SHORT).show();
                }
​
            }
        });
//减
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (progressBar.getProgress()>0){
                    progressBar.setProgress(progressBar.getProgress()-10);
                    //                显示提示信息
                    Toast.makeText(MainActivity7.this, "进度条-10", Toast.LENGTH_SHORT).show();
                }
                else
                {
                    Toast.makeText(MainActivity7.this, "当前进度为0", Toast.LENGTH_SHORT).show();
                }
​
            }
        });
    }
}