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