Android App 开发学习第四天:高级UI组件

进度条类组件

  1. 进度条

    <ProgressBar
    android:max:设置最大进度
    android:progress:设置当前进度
    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:旋转画面的小圆形进度条

    >
    

    当进度条到100%时提示成功

 <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:max="100"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="50dp"
        />
public class MainActivity extends AppCompatActivity {
    private ProgressBar progressBar;
    private int mprogress=0;
    private Handler mHandle;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = this.findViewById(R.id.progressbar);
        mHandle = new Handler(){
            @Override
            public void handleMessage(@NonNull Message msg) {
                if (msg.what ==0x111){
                    progressBar.setProgress(mprogress);
                }else {
                    Toast.makeText(MainActivity.this,"耗时操作已完成",Toast.LENGTH_LONG).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;//操作未完成
                        mHandle.sendMessage(m);
                    }else {
                        m.what=0x110;//操作已完成
                        mHandle.sendMessage(m);
                        break;
                    }
                }
            }
            private  int doWork(){
                mprogress+= Math.random()*100;
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                return mprogress;
            }
        }).start();

    }
}
  1. 拖动条
    <SeekBar
    android:thumb:设置拖动点的图片
    >
    设值拖动条调整图片的透明度
<ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/bg"
        android:scaleType="fitXY"/>
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="120"
        android:layout_alignParentBottom="true"
        android:id="@+id/seekbar"
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/rabbit"
        android:layout_above="@+id/seekbar"
        android:id="@+id/image"
        />
public class MainActivity extends AppCompatActivity {
    SeekBar seekBar;
    private ImageView image;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         seekBar = this.findViewById(R.id.seekbar);
         image=this.findViewById(R.id.image);
         seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
             @Override
             public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                 image.setImageAlpha(progress);
             }

             @Override
             public void onStartTrackingTouch(SeekBar seekBar) {

             }

             @Override
             public void onStopTrackingTouch(SeekBar seekBar) {

             }
         });

    }
}
  1. 星级评分条
    <RatingBar
    android:numStarts :设置星级数量
    android:rating:设置初始所选的星级数量
    android:stepSize:设置每次选取星级数量
    android:isIndicator:设置是否能够修改星级

    >
    

    实现淘宝评价

 <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="店铺评分"
        android:textSize="20sp"
        android:layout_above="@+id/btn"
        android:layout_marginBottom="130dp"
        />
    <RatingBar
        android:id="@+id/ratingbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="5"
        android:layout_above="@+id/btn"
        android:layout_marginBottom="60dp"
        />
    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="#FF5000"
        android:text="提交"
        />
public class MainActivity extends AppCompatActivity {

    private RatingBar ratingBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ratingBar = this.findViewById(R.id.ratingbar);
        Button button = this.findViewById(R.id.btn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                float rating = ratingBar.getRating();
                Toast.makeText(MainActivity.this,"你得到了"+rating+"颗星评价",Toast.LENGTH_LONG).show();
            }
        });
    }
}

图像类组件

  1. 图像视图
    <ImageView
    android:src:设置图像
    android:scaleType:设置图像的缩放

CENTER /center 按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示

CENTER_CROP / centerCrop 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)

CENTER_INSIDE / centerInside 将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽

FIT_CENTER / fitCenter 把图片按比例扩大/缩小到View的宽度,居中显示

FIT_END / fitEnd 把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置

FIT_START / fitStart 把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置

FIT_XY / fitXY 把图片不按比例扩大/缩小到View的大小显示

MATRIX / matrix 用矩阵来绘制,动态缩小放大图片来显示。
android:adjustViewBounds:设置是否允许调整自己的边界,来保持所显示图片的长宽比
android:maxWidth:设置图片最大宽度,需要先设置 android:adjustViewBounds为true
android:maxHeight:设置图片最大高度
app:tint:设置图片的颜色
android:contentDescription:自动朗诵定义的内容

	>
  1. 图像切换器
    <ImageSwitcher

    >
    

    实现手机相册图像切换

 <ImageSwitcher
       android:id="@+id/imageswitcher"
       android:layout_centerVertical="true"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       >
   </ImageSwitcher>

public class MainActivity extends AppCompatActivity {

    private  int[] arrayPicture = new int[]{R.drawable.bg,R.drawable.icon1,R.drawable.icon2,R.drawable.rabbit};
    private ImageSwitcher imageSwitcher;
    private  int index;
    private float touchDownX;
    private float touchUpX;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSwitcher = this.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.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
                        //设置图片进入效果
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
                        imageSwitcher.setImageResource(arrayPicture[index]);

                    }else if (touchDownX-touchUpX>100){
                        index = index==arrayPicture.length-1?0:index+1;
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out));
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in));
                        imageSwitcher.setImageResource(arrayPicture[index]);

                    }
                    return  true;
                }
                return false;
            }
        });
    }
}
  1. 网格视图
    适配器:将后台与前端数据格式进行转换
    ArrayAdapter
    SimpleAdapter
    simpleCursorAdapter
    BaseAdapter

    <GrideView
    android:numClolunms:设置每行列数
    android:verticalSpacing:设置垂直间距
    android:columnWidth:设置列宽
    >

    实现手机相册:自定义图像适配器

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2020年10月30号"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        />
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:verticalSpacing="5dp"
        android:columnWidth="100dp"
        ></GridView>
public class MainActivity extends AppCompatActivity {

    private int[] picture = new int[]{R.drawable.icon1,R.drawable.icon1,R.drawable.icon2,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
            R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
            R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,R.drawable.icon1};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView = (GridView) findViewById(R.id.gridview);
        gridView.setAdapter(new ImageAdapter(this));
    }
    public  class  ImageAdapter extends BaseAdapter{

        private Context mContext;
        public ImageAdapter(Context c){
            this.mContext = c;
        }
        @Override
        public int getCount() {
            return picture.length;
        }

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

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = null;
            if (convertView ==null){
                imageView = new ImageView(mContext);
                imageView.setLayoutParams(new ViewGroup.LayoutParams(100,90));
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            }else {
                imageView =(ImageView) convertView;
            }
            imageView.setImageResource(picture[position]);
            return imageView;

        }
    }
}

列表类组件

  1. 下拉列表框
    <Spinner
    android:entries:设置列表数据,自定义一个数组资源文件,将该资源文件内容作为参数导入
<resources>
    <string-array name="ctype">
        <item>全部</item>
        <item>篮球</item>
        <item>音乐</item>
        <item>学习</item>
    </string-array>
</resources>
	>
	实现豆瓣下拉列表
 <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:entries="@array/ctype"
        ></Spinner>
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="搜索"
        android:textColor="@color/black"/>


public class MainActivity extends AppCompatActivity {

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

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

            }
        });
    }
}
  1. 列表视图
    <ListView
    android:entries:设置列表数据
    android:scrollview:设置右侧滑动条是否显示
    >
    若不在UI界面中设置数据,则可以在java代码中设置适配器。
    实现微信通讯录朋友列表
<ImageView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:src="@drawable/b2"/>
    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="300dp"

        />

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


定义一个xml,指明列表项数据的格式

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="horizontal">
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingRight="10dp"
        android:adjustViewBounds="true"
        android:maxWidth="72dp"
        android:maxHeight="72dp"
        />
    <TextView
        android:id="@+id/title"
        android:padding="10dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        int[] imageid = new int[]{R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
                R.drawable.icon1,R.drawable.icon1,R.drawable.icon1,
                R.drawable.icon1,R.drawable.icon1,R.drawable.icon1};
        String[] title = new String[]{"zhang","zhang","zhang",
                "zhang","zhang","zhang",
                "zhang","zhang","zhang",};
        List<Map<String,Object>> listitem = new ArrayList<>();
        for (int i = 0 ; i<imageid.length ; i++){
            HashMap<String, Object> map = new HashMap<>();
            map.put("image",imageid[0]);
            map.put("name",title[i]);
            listitem.add(map);
        }
        SimpleAdapter adapter = new SimpleAdapter(this, listitem, R.layout.main, new String[]{"name", "image"}, new int[]{R.id.title, R.id.image});
        ListView listView = this.findViewById(R.id.listview);
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                HashMap<String, Object> map = (HashMap<String, Object>) parent.getItemAtPosition(position);
                Toast.makeText(MainActivity.this,map.get("name").toString(),Toast.LENGTH_LONG).show();
            }
        });

    }
}

通用组件

  1. 滚动视图
    <ScrollView :垂直滚动>
    <HorizontalScrollView :水平滚动>

    将组件放进滚动视图中即可实现,但一个滚动视图只能放一个组件,若要放多个组件则需先创建一个布局管理器,将多个组件放进布局管理器中。
    使用java代码实现多个组件滚动视图

<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:id="@+id/zz"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


 <string name="cidina">asdasd
    asdasdads
    asdasdasdasd
    fffffffffffffffffffff
    ffffffffffffffffffffffffff
    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
    asd
    asd
    aasda
    sd
    asd
    asd
    a
    d
    asd
    as
    d
    asddddddddddddddddddddddddddddddddddddd
    adddddddddddddddddddddddddddddddddddddddddddddddd
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</string>
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout linearLayout = this.findViewById(R.id.zz);
        LinearLayout ll2 = new LinearLayout(MainActivity.this);
        ll2.setOrientation(LinearLayout.VERTICAL);
        ScrollView scrollView = new ScrollView(MainActivity.this);
        linearLayout.addView(scrollView);
        scrollView.addView(ll2);
        ImageView imageView = new ImageView(MainActivity.this);
        imageView.setImageResource(R.drawable.rabbit);
        ll2.addView(imageView);
        TextView textView =  new TextView(MainActivity.this);
        textView.setText(R.string.cidina);
        ll2.addView(textView);
    }
}
  1. 选项卡

    1. 在布局文件中添加TabHost、TabWidget和TabContent组件
    2. 编写各标签页的XML布局文件
    3. 获取并初始化TabHost组件
    4. 为TabHost对象添加标签页

实现微信表情商店,可有两页不同的图片分别点击出现

<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:id="@android:id/tabhost"
    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"></FrameLayout>

    </LinearLayout>



</TabHost>

定义两个标签页

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:id="@+id/right">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/rabbit"/>

</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:id="@+id/left">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bg"/>

</LinearLayout>

java代码加载标签页

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));
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值