Android 常用高级控件(自动完成文本框、滑块与进度条、选项卡、画廊控件、下拉列表控件)

最新推荐文章于 2024-06-27 21:07:21 发布

顾缘君兮

最新推荐文章于 2024-06-27 21:07:21 发布

阅读量1.0k

点赞数 1

分类专栏： Android开发文章标签： android xml viewpager 列表

本文链接：https://blog.csdn.net/qq_41117896/article/details/109261070

版权

Android开发专栏收录该内容

28 篇文章 5 订阅

订阅专栏

Android 常用高级控件(自动完成文本框、滑块与进度条、选项卡、画廊控件、下拉列表控件)

自动完成文本框

自动完成文本框，就是在文本框输入文字时，会显示可能的关键字让用户来选择。

AutoCompleteTextView类继承自EditText类。自动完成文本框的外观与图片文本框没有任何区别，只是当用户输入某些文字时，会自动出现下拉菜单显示与用户输入文字相关的信息，用户直接单击需要的文字便可自动填写到文本控件中。使用AutoCompleteTextView很简单，只要为他设置一个Adapter,该Adapter封装了AutoCompleteTextView预设的提示文本。

自动完成文本框可以在XML文件中使用属性进行设置，也可以在Java代码中通过方法进行设置。下面给出常用属性与方法的对照表。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1QFLasAj-1603526685780)(C:\Users\15631\Desktop\image-20201022220725415.png)]

下面给出一个例子：

先看效果图：

在这里插入图片描述

用户输入一个字，就会自动提示出相关的输入选项

在这里插入图片描述

使用步骤：

首先在string.xml文件中，设置提示文本库：

<resources>
    <string name="app_name">android_gaojikongjian</string>
    <string-array name="heros">
        <item>不知火舞</item>
        <item>娜可露露</item>
        <item>橘右京</item>
        <item>宫本武藏</item>
        <item>马可波罗</item>
        <item>张良</item>
        <item>张飞</item>
    </string-array>
</resources>

xml代码如下：

线性布局，加入一个自动完成文本框

<?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"
    tools:context=".auto">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:completionThreshold="1"
        android:hint ="请选择你的英雄" />
</LinearLayout>

对应的activity代码如下：

package com.example.android_gaojikongjian;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class auto extends AppCompatActivity {

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

        String[] heros = this.getResources().getStringArray(R.array.heros);//引入提示文本库
        ArrayAdapter<String> ada = new ArrayAdapter(this, android.R.layout.simple_dropdown_item_1line, heros);//创建适配器
        AutoCompleteTextView auto = findViewById(R.id.autoCompleteTextView);
        auto.setAdapter(ada);//设置适配器
    }
}

滑块与进度条

ProgressBar类简介：该类同样位于android.widget包下，但它继承自View，主要用于显示一些操作的进度。

SeekBar类简介：该类继承自ProgressBar，是用来接收用户输入的控件。SeekBar类似于拖拉条，可以直观地先显示用户需要的数据，常用于声音调节等场合。

下面给出一个例子，先看效果图：

在这里插入图片描述

上面是一个进度条，下面是一个拖动滑块，最下面文本框显示拖动的当前进度

xml代码如下：

<?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=".HuakuaiJindutiao">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <SeekBar
        android:id="@+id/seekBar"
        android:max="100"
        android:layout_marginTop="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp" />
</LinearLayout>

activity代码如下：

package com.example.android_gaojikongjian;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ProgressBar;
import android.widget.SeekBar;
import android.widget.TextView;

public class HuakuaiJindutiao extends AppCompatActivity {

    int max=100;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_huakuai_jindutiao);

        final TextView text=this.findViewById(R.id.textView);
        //普通拖拉条被拉动的处理代码
        SeekBar sb = this.findViewById(R.id.seekBar);
        sb.setOnSeekBarChangeListener(    //添加监听
                new SeekBar.OnSeekBarChangeListener()//创建一个监听类
                {

                    public void onStopTrackingTouch(SeekBar seekBar) {
                    }
                    public void onStartTrackingTouch(SeekBar seekBar) {
                    }
                    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
                    {
                        ProgressBar pb = findViewById(R.id.progressBar);
                        SeekBar sb = findViewById(R.id.seekBar);
                        pb.setProgress(sb.getProgress());//设置进度
                        text.setText("当前进度"+ progress +"/"+max);
                    }
                });
    }
}

选项卡

选项卡主要由TabHost、TabWidget和FrameLayout3个组件组成，用于实现一个多标签页的用户界面，通过它可以将一个复杂的对话框分割成若干个标签页，实现对信息的分类显示和管理。使用该组件不仅可以使界面简洁大方，还可以有效地减少窗体的个数。

在Android中，实现选项卡的一般步骤如下：
(1)在布局文件中添加实现选项卡所需的TabHost、TabWidget和FrameLayout组件。
(2)编写各标签页中需要显示内容所对应的XML布局文件。
(3)在Activity中，获取并初始化TabHost组件。
(4)为TabHost对象添加标签页

下面给出一个例子，先看效果图：

共有三个选项卡：

在这里插入图片描述

xml代码如下：

<?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=".Xuanxiangka">


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

        <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">

            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/tab1" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="30dp"
                    android:layout_gravity="center_horizontal"
                    android:text="第一张图片" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/tab1" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="30dp"
                    android:layout_gravity="center_horizontal"
                    android:text="第二张图片" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/imageView3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/tab1" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="30dp"
                    android:layout_gravity="center_horizontal"
                    android:text="第三张图片" />
            </LinearLayout>
        </FrameLayout>


    </LinearLayout>

</TabHost>

activity代码如下：

package com.example.android_gaojikongjian;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TabHost;

public class Xuanxiangka extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_xuanxiangka);
        TabHost tab = (TabHost) findViewById(android.R.id.tabhost);

        //初始化TabHost容器
        tab.setup();

        //在TabHost创建标签，然后设置：标题／图标／标签页布局
        tab.addTab(tab.newTabSpec("tab1").setIndicator("选项卡1" , getResources().getDrawable(R.drawable.tab1)).setContent(R.id.tab1));
        tab.addTab(tab.newTabSpec("tab2").setIndicator("选项卡2" , getResources().getDrawable(R.drawable.tab2)).setContent(R.id.tab2));
        tab.addTab(tab.newTabSpec("tab3").setIndicator("选项卡3" , getResources().getDrawable(R.drawable.tab3)).setContent(R.id.tab3));
    }
}

画廊控件

所谓画廊，就是像我们手机相册那样可以直接用手左右滑动翻看图片的效果，先看效果：

在这里插入图片描述

左右滑动切换图片：
在这里插入图片描述

一个ViewPager来显示图片列表。这个页面，ViewPage展示了前后的预览，我们让预览页进行Y轴的压缩，并设置透明度为0.5f,所以左右两边的图片有点朦胧感，让预览页和主页面有主从感。

xml代码：

设置android:clipChildren=“false”，这个属性是代表FrameLayout 允许子控件的内容超出其内容，不对超出的部分进行裁剪。这样我们就可以得到左右两边的预览部分了

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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:clipChildren="false"
    tools:context=".Hualang">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/hualang"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


</FrameLayout>

画廊activity代码，设置一个主页面和前后两个预览页，并设置预览页进行Y轴压缩和透明度为0.5f：

package com.example.android_gaojikongjian;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.os.PersistableBundle;
import android.widget.FrameLayout;

public class Hualang extends AppCompatActivity {

    ViewPager viewPager;
    GalleryAdapter adapter;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState, @Nullable PersistableBundle persistentState) {
        super.onCreate(savedInstanceState, persistentState);
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hualang);

        viewPager = (ViewPager) findViewById(R.id.hualang);
        adapter = new GalleryAdapter(this);
        viewPager.setAdapter(adapter);
        //是否对padding进行裁剪
        viewPager.setClipToPadding(false);
        int itemWidth = (getResources().getDisplayMetrics().widthPixels) / 3;
        FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) viewPager.getLayoutParams();
        layoutParams.leftMargin = itemWidth / 2;
        layoutParams.rightMargin = itemWidth / 2;
        //设置页面的左右padding
        viewPager.setLayoutParams(layoutParams);
        //设置预加载为3
        viewPager.setOffscreenPageLimit(3);
        //设置页面之间的margin为0
        viewPager.setPageMargin(0);
        viewPager.setPageTransformer(true, (view, position) -> {
            if (position < 0) {
                view.setScaleY(0.2f * position + 1);
                view.setAlpha(1f + 0.5f * position);
            } else if (position < 1) {
                view.setAlpha(1f - 0.5f * position);
                view.setScaleY(-0.2f * position + 1);
            } else {
                view.setAlpha(0.3f);
                view.setScaleY(0.8f);
            }
        });
    }
}

GalleryAdapter 代码：

package com.example.android_gaojikongjian;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import androidx.viewpager.widget.PagerAdapter;

public class GalleryAdapter extends PagerAdapter {
    int[] imgs = {R.drawable.h1, R.drawable.h2, R.drawable.h3, R.drawable.h4, R.drawable.h5};
    private Context mContext;

    public GalleryAdapter(Context context) {
        this.mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView iv = new ImageView(container.getContext());
        iv.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT));
        iv.setBackground(mContext.getDrawable(imgs[position % 3]));
        container.addView(iv);
        return iv;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View)object);
    }
}

通过重写startScroll方法设置mDuration为我们想要的时间，并实例化一个Scroller 对象，并通过反射把ViewPager 的私有属性mScroller给替换掉。这样，我们就可以设置ViewPager 转场动画的延迟了.

GalleryViewPagerScroller代码：

package com.example.android_gaojikongjian;

import android.content.Context;
import android.widget.Scroller;

import androidx.viewpager.widget.ViewPager;

import java.lang.reflect.Field;

public class ViewPagerScroller extends Scroller {
    private int mScrollDuration = 2000; // 滑动速度

    /**
     * 设置速度速度
     *
     * @param duration
     */
    public void setScrollDuration(int duration) {
        this.mScrollDuration = duration;
    }

    public ViewPagerScroller(Context context) {
        super(context);
    }

    public ViewPagerScroller(Context context, android.view.animation.Interpolator interpolator) {
        super(context, interpolator);
    }

    public ViewPagerScroller(Context context, android.view.animation.Interpolator interpolator, boolean flywheel) {
        super(context, interpolator, flywheel);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        super.startScroll(startX, startY, dx, dy, mScrollDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        super.startScroll(startX, startY, dx, dy, mScrollDuration);
    }

    public void initViewPagerScroll(ViewPager viewPager) {
        try {
            Field mScroller = ViewPager.class.getDeclaredField("mScroller");
            mScroller.setAccessible(true);
            mScroller.set(viewPager, this);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

下拉列表控件

Spinner位于android：widget包下，每次只显示用户选中的元素，当用户再次点击时，会弹出选择列表供用户选择，效果如下：

在这里插入图片描述

点击后弹出选择列表：

在这里插入图片描述

xml代码：

<?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=".Xialaliebiao">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp">

    </Spinner>
</LinearLayout>

activity代码：

package com.example.android_gaojikongjian;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

import java.util.ArrayList;
import java.util.List;

public class Xialaliebiao extends AppCompatActivity {

    Spinner spinner;
    ArrayAdapter<String> arr_adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_xialaliebiao);

        spinner = findViewById(R.id.spinner);
        String[] heros = this.getResources().getStringArray(R.array.heros);
        //适配器
        arr_adapter= new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, heros);
        //设置样式
        arr_adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //加载适配器
        spinner.setAdapter(arr_adapter);

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

        spinner = findViewById(R.id.spinner);
        String[] heros = this.getResources().getStringArray(R.array.heros);
        //适配器
        arr_adapter= new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, heros);
        //设置样式
        arr_adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //加载适配器
        spinner.setAdapter(arr_adapter);

    }
}