Android开发之高级UI组件(个人学习笔记)

最新推荐文章于 2025-06-01 09:54:15 发布

原创最新推荐文章于 2025-06-01 09:54:15 发布 · 698 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

Android 专栏收录该内容

4 篇文章

订阅专栏

5.高级UI组件

5.1进度条类组件

5.1.1进度条 <ProgressBar />

（1）分为圆形和长条形，默认是圆形，通过设置style属性值来显示样式。

如下图：

（2）属性：android:progress="50" 当前进度
android:max="100" 进度条最大值
style
android:layout_width
android:layout_height

（3）根据耗时操作实时改变

例子：前端代码：

后端代码：

public class MainActivity extends AppCompatActivity {
    private ProgressBar progressBar;
    private int mprogress=0;
    private Handler handler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progressBar=findViewById(R.id.progressbar);
        handler=new Handler(){
            @Override
            public void handleMessage(@NonNull Message msg) {
                if(msg.what==0x111){
                    progressBar.setProgress(mprogress);
                }else{
                    Toast.makeText(MainActivity.this,"耗时操作已完成",Toast.LENGTH_SHORT).show();
                    progressBar.setVisibility(View.GONE);
                }
            }
        };

        new Thread(new Runnable() {
            @Override
            public void run() {
                while(true){
                    mprogress=doWork();
                    Message m=new Message();
                    if(mprogress<100){
                        m.what=0x111;//自定义的消息代码
                        handler.sendMessage(m);
                    }else{
                        m.what=0x110;
                        handler.sendMessage(m);
                        break;
                    }
                }
            }
            private int doWork(){
                mprogress+=Math.random()*10;
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                return mprogress;
            }

        }).start();

    }

}

5.1.2 拖动条 <SeekBar />

（1）是进度条的一个子类，所以也可以用max,peogress等属性

android:thumb可以把拖动条上的圆点改为图片

（2）前台代码：

后端代码：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SeekBar seekBar=findViewById(R.id.seekbar);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {//进度改变时执行的方法
                Toast.makeText(MainActivity.this, "进度改变"+progress, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {//开始触摸时执行的方法
                Toast.makeText(MainActivity.this, "开始触摸", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {//停止触摸时执行的方法
                Toast.makeText(MainActivity.this, "停止触摸", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

（3）例子：实现拖动进度条改变图片透明度（SDK选17以上）

前台代码：

后台代码：

public class MainActivity extends AppCompatActivity {

    private SeekBar seekBar;
    private ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView=findViewById(R.id.imageview);
        seekBar=findViewById(R.id.seekbar);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                imageView.setImageAlpha(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

5.1.3 星际评分条 <RatingBar />

（1）属性 android:numStars 星星的总数，默认是5颗

android:rating 点亮几颗星

android:stepSize="1" 每次点亮一颗星，默认值为0.5，每次点亮半颗星

android:isIndicator="true" 不能改变

（2）前台代码：

public class MainActivity extends AppCompatActivity {
后台代码：
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RatingBar ratingBar = findViewById(R.id.ratingbar);
        String s = String.valueOf(ratingBar.getRating());
        Toast.makeText(MainActivity.this, "Rating" + s, Toast.LENGTH_SHORT).show();//几个星
        String str= String.valueOf(ratingBar.getStepSize());
        Toast.makeText(MainActivity.this, "StepSize" + str, Toast.LENGTH_SHORT).show();//
        String string= String.valueOf(ratingBar.getProgress());
        Toast.makeText(MainActivity.this, "Process" + string, Toast.LENGTH_SHORT).show();
    }
}

5.2图像类组件

5.2.1 图像视图 <ImageView />

（1）属性
    android:scaleType 对图像进行缩放
    android:src
    android:layout_width
    android:layout_height

android:adjustViewBounds="true"是否调整自己的边界来保证图片的长宽比，设置为true后，可以设置图片的最大高度和最大宽度

android:maxWidth 图片的最大宽度
android:maxHeight 图片的最大高度

android:tint 为图片设置着色

5.2.2 图像切换器 <ImageSwitcher />

例子：相册图片切换

前台代码：

后台代码：

public class MainActivity extends AppCompatActivity {
    private int[] arrayPicture = new int[]{
            R.mipmap.img1, R.mipmap.img2, R.mipmap.img11, R.mipmap.img4,
            R.mipmap.img5, R.mipmap.img6, R.mipmap.img7,
    };

    private ImageSwitcher imageSwitcher;
    private int index;
    private float touchdownX,touchupX;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageSwitcher = findViewById(R.id.imageswitcher);
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView=new ImageView(MainActivity.this);
                imageView.setImageResource(arrayPicture[index]);
                return imageView;
            }
        });

        imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if(event.getAction()==MotionEvent.ACTION_DOWN){
                    touchdownX=event.getX();
                    return true;
                }else if(event.getAction()==MotionEvent.ACTION_UP){
                    touchupX=event.getX();
                    if(touchupX-touchdownX>100){
                        index=index==0? arrayPicture.length-1:index-1;

                        imageSwitcher.setImageResource(arrayPicture[index]);
                    }else if(touchdownX-touchupX>100){
                        index=index==arrayPicture.length-1? 0:index+1;

                        imageSwitcher.setImageResource(arrayPicture[index]);
                    }
                    return true;
                }
                return false;
            }
        });

    }
}

5.3 列表类组件

5.3.1 网格视图<GridView/>

（1）常用属性：
    android:numColumns="3"定义列数，值为时auto_fit，是自动排列
    android:layout_width
    android:layout_height

android:verticalSpacing 垂直间距
android:columnWidth 列的宽度

适配器：

ArrayAdapter :数组适配器，通常用于将数组的多个值包装成多个列表项，只能显示一行文字。

SimpleAdapter:简单适配器，通常用于把list集合的多个值包装成多个列表项，可以自定义各种效果。

SimpleCursorAdapter:与上面的SimpleAdapter类似，将数据库的内容以列表的形式展现。

BaseAdapter:对各个列表项进行最大限度的定制，具有很高的灵活性。

例子：

前台代码：

另一个xml文件中关键代码

后台代码：

public class MainActivity extends AppCompatActivity {

    private int[] picture=new int[]{
            R.mipmap.img1,R.mipmap.img2,R.mipmap.img11,
            R.mipmap.img4,R.mipmap.img6,R.mipmap.img7,
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GridView gridView=findViewById(R.id.gridview);

        List<Map<String,Object>> list=new ArrayList<Map<String,Object>>();
        for(int i=0;i<picture.length;i++){
            Map<String,Object> map=new HashMap<String,Object>();
            map.put("image",picture[i]);
            list.add(map);
        }
        SimpleAdapter simpleAdapter=new SimpleAdapter(this,list,R.layout.cell,new String[]{"image"},new int[]{R.id.image});
        gridView.setAdapter(simpleAdapter);

    }
}

5.3.2 下拉列表框<Spinner/>

下拉列表实现两种方法：

①使用属性：android:entries="@array/ctype"

需要在values中建一个xml文件，代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="ctype">
        <item>全部</item>
        <item>电影</item>
        <item>游戏</item>
        <item>图书</item>
    </string-array>

</resources>

②在Java代码中实现

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String[] ctype=new String[]{"全部","电影","游戏","图书"};
        ArrayAdapter<String> arrayAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,ctype);
        arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        Spinner spinner=findViewById(R.id.spinner);
        spinner.setAdapter(arrayAdapter);

        String str = String.valueOf(spinner.getSelectedItem());//获取下拉列表中选中的值
        Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();

    }
}

5.3.3 列表视图<ListView/>

实现列表视图两种方法

①使用属性：android:entries="@array/ctype"

需要在values中建一个xml文件，代码如下所示：

②在Java代码中实现

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String[] ctype=new String[]{"全部","电影","游戏","图书"};
        ArrayAdapter<String> arrayAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,ctype);
        ListView listView=findViewById(R.id.listview);
        listView.setAdapter(arrayAdapter);

    }
}

5.3.4 滚动视图（滚动条）

两种方法（1）在xml文件中创建

①右侧竖向滚动条：<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

   <TextView
       android:text="@string/context"
       android:textSize="35sp"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>
</ScrollView>

②下方横向滚动条：

注意：不论是水平滚动条还是垂直滚动条，都只能放置一个组件，要想放置多个组件，需要使用一个布局管理器，把组件括起来。

在Java文件中创建

步骤： ①使用构造方法ScrollView(Context c)创建一个滚动视图

②应用addView()方法添加组件到滚动视图中

③将滚动视图添加到布局管理器中

代码：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout ll=findViewById(R.id.ll);
        LinearLayout ll2=new LinearLayout(MainActivity.this);
        ll2.setOrientation(LinearLayout.VERTICAL);

        ScrollView scrollView=new ScrollView(MainActivity.this);
        ll.addView(scrollView);
        scrollView.addView(ll2);
        ImageView imageView=new ImageView(MainActivity.this);
        imageView.setImageResource(R.mipmap.rabbit);
        ll2.addView(imageView);
        TextView textView=new TextView(MainActivity.this);
        textView.setText(R.string.context);
        ll2.addView(textView);

    }
}

5.3.5选项卡

无法通过某一个具体的组件在xml布局文件中添加，需用java代码

步骤： ①在布局文件中添加TabHost、TabWidget和TabContext组件

②编写各标签页的xml布局文件

③获取并初始化TabHost组件

④为TabHost对象添加标签页

前台代码：

<?xml version="1.0" encoding="utf-8"?>
<TabHost 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"
    android:id="@android:id/tabhost"
    tools:context=".MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </TabWidget>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </FrameLayout>

    </LinearLayout>
</TabHost>

编写两个标签页的xml文件tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/left"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:src="@mipmap/rabbit"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/right"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:src="@mipmap/img7"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

后端代码：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabHost tabHost=findViewById(android.R.id.tabhost);
        tabHost.setup();//初始化
        LayoutInflater inflater=LayoutInflater.from(this);
        inflater.inflate(R.layout.tab1,tabHost.getTabContentView());//加载标签页
        inflater.inflate(R.layout.tab2,tabHost.getTabContentView());
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("兔子").setContent(R.id.left));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("风景").setContent(R.id.right));
    }
}