第三章高级UI组件

最新推荐文章于 2024-11-04 08:58:12 发布

小鑫-Chen

最新推荐文章于 2024-11-04 08:58:12 发布

阅读量142

点赞数

分类专栏： android 文章标签： ui android android studio

本文链接：https://blog.csdn.net/qq_37054755/article/details/127553774

版权

android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

3.1 进度条

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="25dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="60dp"
    android:max="100"/>

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
horizonP = findViewById(R.id.progressBar);
mHandler = new Handler() {
    @Override
    public void handleMessage(@NonNull Message msg) {
        if(msg.what == 0x111) {
             horizonP.setProgress(mProgressStatus);  //更新进度
         } else {
             Toast.makeText(MainActivity.this, "耗时操作已经完成",Toast.LENGTH_SHORT).show();
             horizonP.setVisibility(View.GONE);      //设置进度条不显示，并且不占空间
         }
    }
};
new Thread(new Runnable() {
    @Override
    public void run() {
        while(true) {
            mProgressStatus = doWork();  //获取耗时操作完成的百分比
            Message m = new Message();
            if(mProgressStatus < 100) {
                m.what = 0x111;
                mHandler.sendMessage(m);
             } else {
                m.what = 0x110;
                mHandler.sendMessage(m);
                break;
         }
     }
}

   private int doWork() {
       mProgressStatus += Math.random() * 10;  //改变完成进度
       try {
           Thread.sleep(200);
        } catch(InterruptedException e) {
            e.printStackTrace();
        }
        return mProgressStatus;
    }
}).start();   //开启一个线程

3.2 拖动条

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/lijiang"/>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:max="255"
        android:progress="255" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/meitu"/>

        ImageView imageView = findViewById(R.id.imageView);
        SeekBar seekBar = findViewById(R.id.seekbar);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                System.out.println(progress);
                imageView.setImageAlpha(progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                System.out.println("bagin touch");
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                System.out.println("end touch");
            }
        });

3.3 星级评分条

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="店铺评分"
        android:layout_above="@+id/btn"
        android:layout_marginBottom="200dp"
        android:layout_marginLeft="10dp"
        android:textSize="30sp"/>

    <RatingBar
        android:id="@+id/ratingbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="400dp"
        android:layout_marginLeft="10dp"
        android:rating="4"
        android:stepSize="1" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="提交评价"/>

        RatingBar rating = findViewById(R.id.ratingbar);
        Button btn = findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "你得到了："+(int)rating.getRating()+"颗星", Toast.LENGTH_SHORT).show();
            }
        });

3.4 图像视图

3.5 图像切换器

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    private int[] images = {R.mipmap.img01, R.mipmap.img02, R.mipmap.img03, R.mipmap.img04, R.mipmap.img05,
            R.mipmap.img06, R.mipmap.img07, R.mipmap.img08, R.mipmap.img09};
    private int index = 0;
    private float touchDownX = -1, touchUpX = -1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageSwitcher imageSwitcher = findViewById(R.id.imageSwitcher);
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(images[(index++)%images.length]);
                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(touchDownX - touchUpX > 100) {
                        //往左滑动
                        index = (index == 0)? images.length-1 : index - 1;
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_right));
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_left));
                        imageSwitcher.setImageResource(images[index]);
                    } else if(touchUpX - touchDownX > 100) {
                        //往右滑动
                        index = (index == images.length-1) ? 0 : index + 1;
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_left));
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_right));
                        imageSwitcher.setImageResource(images[index]);
                    }
                    return true;
                }
                return false;
            }
        });
    }

3.6 网格视图

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@mipmap/qqxiang"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="2016年1月19号"/>

    <GridView
        android:id="@+id/gridView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:verticalSpacing="5dp"
        android:horizontalSpacing="5dp"
        android:columnWidth="100dp"/>

    <ImageView
        android:id="@+id/image"
        android:layout_width="120dp"
        android:layout_height="75dp"
        android:scaleType="fitXY"/>

    private int[] images = {R.mipmap.img01, R.mipmap.img02, R.mipmap.img03, R.mipmap.img04,
            R.mipmap.img05, R.mipmap.img06, R.mipmap.img07, R.mipmap.img08, R.mipmap.img09,
            R.mipmap.img10, R.mipmap.img11, R.mipmap.img12};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView = findViewById(R.id.gridView);
        List<Map<String, Object>> listItem = new ArrayList<>();
        for(int i = 0; i < images.length; i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("image", images[i]);
            listItem.add(map);
        }
        SimpleAdapter simpleAdapter = new SimpleAdapter(MainActivity.this, listItem,
                R.layout.cell, new String[]{"image"}, new int[]{R.id.image});
        gridView.setAdapter(simpleAdapter);
    }

3.7 下拉列表框视图

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:entries="@array/subject" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="搜索"/>

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Spinner spinner = findViewById(R.id.spinner);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, (String)spinner.getSelectedItem(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });
    }

3.8 列表视图

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:maxWidth="50dp"
        android:maxHeight="60dp"
        android:layout_margin="5dp"/>

    <TextView
        android:id="@+id/name"
        android:layout_marginLeft="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="20sp"/>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/wei_top"
        android:scaleType="fitXY"/>

    <ListView
        android:layout_below="@id/imageView1"
        android:layout_above="@id/imageView2"
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/wei_down"
        android:scaleType="fitXY"
        android:layout_alignParentBottom="true"/>

    private int[] images = {R.mipmap.img01, R.mipmap.img02, R.mipmap.img03, R.mipmap.img04,
        R.mipmap.img05, R.mipmap.img06, R.mipmap.img07, R.mipmap.img08, R.mipmap.img09};

    private String[] names = {"刘一", "陈二", "张三", "李四", "王五", "赵六", "孙七", "周八", "吴九"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        List<Map<String, Object>> listitem = new ArrayList<>();
        for(int i = 0; i < images.length; i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("image", images[i]);
            map.put("name", names[i]);
            listitem.add(map);
        }
        ListView listView = findViewById(R.id.listView);
        SimpleAdapter adapter = new SimpleAdapter(MainActivity.this, listitem,
                R.layout.cell, new String[]{"image", "name"}, new int[]{R.id.imageView, R.id.name});
        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, (String)listitem.get(position).get("name"), Toast.LENGTH_SHORT).show();
            }
        });
    }

3.9 滚动视图

两种滚动视图：

ScrollView：垂直滚动视图
HorizontalScrollView：水平滚动视图

在Java文件中添加滚动视图的方法：

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:src="@mipmap/cidian"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"
                android:textSize="20sp"
                android:layout_marginTop="10dp"/>
        </LinearLayout>
    </ScrollView>

3.10 选项卡

选项卡添加步骤：

<?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:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"></TabWidget>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
</TabHost>

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/biaoqing_left"/>

</LinearLayout>

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/biaoqing_right"/>

</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));
    }
}