Android高级UI组件

Android高级UI组件

  1. 进度条类组件
  2. 图像类组件
  3. 列表类组件
  4. 通用组件

一、进度条

用ProgressBar来标记。

1.Andorid提供了水平进度条、圆形进度条,不加设置默认为圆形进度条。

想展示实时进度:使用水平进度条
只想显示在加载:圆形进度条

2.属性:
①style来修改进度条的样式:特别注意无前缀andorid
style的属性值:
?android:attr/progressBarStyleHorizontal,细水平长条进度条
?android:attr/progressBarStyleSmall,小圆形进度条
?android:attr/progressBarStyleLarge,大圆形进度条
@android:style/Widget.ProgressBar.Horizontal,粗水平长条进度条
@android:style/Widget.ProgressBar.Large,旋转画面的大圆形进度条
@android:style/Widget.ProgressBar.Small,旋转画面的小圆形进度条

②android:max,设置最大值,属性值可为具体数值。

③android:progress,设置当前进度,属性值为具体数值

3.事件监听器

实现进度条的实时改变:需创建线程,在线程中循环获取耗时的进度,并更新进度。
在这里插入图片描述
在Android中不支持在主线程中更新UI组件,可以实例化一个Handler对象,即消息处理对象,通过发送消息来更新UI组件。、

对于耗时操作可通过一个线程来模拟

 progressBar= (ProgressBar) findViewById(R.id.pg);
        //消息处理
        mHandler=new Handler() {
            @Override
            public void handleMessage(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;//耗时操作未完成,为自定义代码,一般以0x开头
                        mHandler.sendMessage(m);
                    }
                    else
                    {
                        m.what=0x110;//耗时操作已完成
                        mHandler.sendMessage(m);
                        break;
                    }
                }
            }
            private  int doWork()
            {
                mProgress+=Math.random()*10;
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                return mProgress;
            }
        }).start();//开始线程
    }

二、拖动条

1.用SeekBar来标记。
2.为进度条的子类,具有进度条拥有的属性。
3.属性:
①android:thumb,修改拖动条的小点,属性值可为图片资源
②android:max,设置最大值,属性值可为具体数值。
③android:progress,设置当前进度,属性值为具体数值

三、星级评分条

用RatingBar标记,默认星星为灰色的

1.属性
①android:numStars,设置评分条的星星个数
②android:rating,属性值为数值,设置初始点亮个数
③android:stepSize,设置最小点亮星数。
④android:isIndicator,属性值为布尔类型,为true时,评分条只能看不能改

四、图像视图

用来显示图片,用ImageView来添加。

为图像组件,属性:
①android:src,显示图片

②设置缩放方式
android:scaleType=“fitXY” //把图片按照指定的大小在ImageView中显示,拉伸显示图片,不保持原比例,填满ImageView.
android:scaleType=“fitStart”//把原图按照比例放大缩小到ImageView的高度,显示在ImageView的start(前部/上部)

③设置最大宽度、高度:
android:adjustViewBounds=“true”//可设置最大高度,宽度…
android:maxWidth=“100dp”
android:maxHeight=“100dp”

④设置图片着色
android:tint,

在这里插入图片描述

扩展:只允许横屏模式,
则在manifests的activity后添加android:screenOrientation="landscape">

五、图像切换器

实现带动画效果的图片切换功能。

使用ImageSwitcher来添加。

设置初始图片:

 imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                //创建一个图片对象
                ImageView imageView=new ImageView(MainActivity.this);
                //给该对象设置图片
                imageView.setImageResource(arrayPicture[index]);
                return imageView;
            }
        });

使用Java代码来实现切换动画效果

ImageSwitcher imageSwitcher;

 imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this,
 android.R.anim.fade_out));//设置淡出

六、网格视图

按行列分布方式显示多个组件

用GridView添加网格视图。

要显示图片,要设置一个适配器(Adapter),适配器:连接后端数据与前端显示的接口,是数据和UI组件中的重要纽带。要添加适配器,要在Java文件中写代码

四个常用适配器:
ArrayAdapter,数组适配器,将数组的多个值包装成列表项,只能显示一行文字。
SmipleAdapter,把List的多个值包装成多个列表项。
SmipleCursorAdapter,将数据库的内容以列表的形式展示出来。
BaseAdapter,对各个列表项进行最大限度的定制。

属性:
android:numColumns,设置列数,属性值为数值或auto_fit(自动排列)。

**MainActivity.java**
package com.mingrisoft.qqal;

import android.content.Context;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity {
    //放置图片资源id的int数组。
    private int[] picture=new int[]{
            R.drawable.t1,R.drawable.t2,R.drawable.t3,R.drawable.t4,
            R.drawable.t5,R.drawable.t6,R.drawable.t7,R.drawable.t8,
            R.drawable.t9

    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取网格视图
        GridView gridView= (GridView) findViewById(R.id.gridview);
        //将适配器加入到网格视图中
        gridView.setAdapter(new ImageAdpter(this));
    }
    //自定义一个适配器,继承自BaseAdapter
    public class ImageAdpter extends BaseAdapter{
        //上下文对象
        private Context mContext;
        public ImageAdpter(Context c){
            mContext=c;
        }

        @Override
        public int getCount() {
            return picture.length;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            ImageView imageView;
            if(view==null)
            {
                imageView=new ImageView(mContext);
                //设置大小
                imageView.setLayoutParams(new GridView.LayoutParams(100,90));
                //设置显示形式
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

            }
            else
            {
                imageView=(ImageView)view;
            }
            imageView.setImageResource(picture[i]);
            return imageView;
        }
    }
}

**layout.xml文件**
<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mingrisoft.qqal.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="2020年2月7日" />

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="auto_fit"
        android:layout_gravity="center"
        android:verticalSpacing="5dp"
        android:columnWidth="100dp"></GridView>
</LinearLayout>

七、下拉列表框

使用Spinner添加

属性:
android:entries,添加下拉列表项,属性值为数组资源。
下拉列表框可使用entries来设置或使用适配器来指定。
一般使用适配器

1、使用适配器:

        //字符串数组,数据源
        String[] ctype=new String[]{"全部","美术","音乐","体育"};
        //设置常量(final)数组适配器,内含元素为字符串,第一个参数this为上下文指针
        // 第二个参数android.R.layout.simple_spinner_item为android提供的外观形式,第三个参数为显示文字
        final ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,ctype);
        //设置下拉菜单样式,android.R.layout.simple_spinner_dropdown_item为android提供的外观样式
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //获取下拉列表框
        Spinner spinner= (Spinner) findViewById(R.id.spinner);
        //将ArrayAdapter 添加Spinner 对象中
        spinner.setAdapter(adapter);
       //事件监听器,此时为:项目被选择时监听器
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                //获取选中值,并将其变成字符串。
                String str = adapterView.getItemAtPosition(i).toString();
                //输出
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_LONG).show();
            }

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

            }
        });

    }

2、使用entries

android:entries="@array/ctype"

//在value中新建一个array.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="ctype">
        <item>全部</item>
        <item>电影/电视</item>
        <item>图书</item>
        <item>唱片</item>
        <item>小事</item>
        <item>用户</item>
        <item>小组</item>
        <item>群聊</item>
        <item>游戏/应用</item>
        <item>活动</item>
    </string-array>
</resources>


特别注意:在下拉列表中,设置的是选择事件监听器,在列表视图中是点击事件监听器!!

八、列表视图

用ListView来标记。
列表项可使用entries来设置或使用适配器来指定。

使用适配器

 //字符串数组
        String[] ctype=new String[]{"全部","图书","游戏","电视"};
        //设置适配器,元素为String、
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,ctype);
        //获取列表视图
        ListView listView= (ListView) findViewById(R.id.listview);
        //将适配器放入列表视图
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                String str=adapterView.getItemAtPosition(i).toString();
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
            }
        });

九、滚动视图

使用ScrollView/HorizontalScrollView来添加。
其中,HorizontalScrollView为水平滚动条,ScrollView为竖直滚动条。

特别注意,一个滚动视图中只能添加一个组件,若想放置多个,需用一个布局管理器括起来
添加滚动视图的两种方法:
1、在xml文件中添加
2、在Java文件中添加

在xml中添加

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mingrisoft.demo.MainActivity">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="50sp"
            android:text="@string/content"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="50sp"
            android:text="@string/content"/>
        </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>

在Java文件中添加

  1. 使用构造方法ScrollView(Context c)创建一个滚动式图
  2. 应用addView()方法添加组件到滚动视图中
  3. 将滚动视图添加到布局管理器中。

例子如下:
acitivity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mingrisoft.javascrollview.MainActivity">

</LinearLayout>

Activity_main.java文件

package com.mingrisoft.javascrollview;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获得xml中的根布局管理器
        LinearLayout ll= (LinearLayout) findViewById(R.id.ll);
        //创建一个布局管理器对象,用来将两个组件(ImageView和TextView)括起来
        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.drawable.tt1);
        ll2.addView(imageView);
        //创建文本框并添加
        TextView textView=new TextView(MainActivity.this);
        textView.setText(R.string.context);
        ll2.addView(textView);
    }
}

十、选项卡

多标签页界面
作用:使界面简洁大方,减少窗体个数。

如何添加,使用选项卡?
不能通过具体组件在xml文件中直接添加,需4个步骤。

  1. 在布局文件中添加TabHost、TabWidget、TabContent组件。前两个在布局文件中有具体标记,后一个需要FrameLayout来实现。
  2. 编写各标签页的XML布局文件,即有几个标签页就编写几个布局文件,布局文件中的内容即为选项卡中显示的内容。
  3. 获取并初始化TabHost组件。
  4. 为TabHost对象添加标签页

实例:
在这里插入图片描述
在这里插入图片描述

activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mingrisoft.demo2.MainActivity">
    <!--因为要添加两个组件,所以要用LinearLayout括起来 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- id为android预定好的id -->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ></TabWidget>
        <!-- TabContent-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </FrameLayout>
    </LinearLayout>

</TabHost>

设计视图:其中上面的TAB LABEL为添加的TabWeiget,下面为FrameLayout
在这里插入图片描述

tab1.xml文件

<?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:id="@+id/left"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/s1"/>
</LinearLayout>

tab2.xml文件

<?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:id="@+id/right"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/s2"/>

</LinearLayout>

MainActivity.java文件

package com.mingrisoft.demo2;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取xml中TabHost对象
        TabHost tabHost= (TabHost) findViewById(android.R.id.tabhost);
        //对组件初始化
        tabHost.setup();
        //添加2个标签页,需声明并实例化LayoutInflater
        LayoutInflater inflater=LayoutInflater.from(this);
        inflater.inflate(R.layout.tab1,tabHost.getTabContentView());
        inflater.inflate(R.layout.tab2,tabHost.getTabContentView());
        //addTab为添加标签页,newTabSpec指定标签页,,setIndicator指定文字,setContent指定内容
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("文字").setContent(R.id.left));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("主题").setContent(R.id.right));
    }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章