Android 高级UI组件（二）

阅读原文时间：2023年07月11日阅读：3

1、ExpandableListView

显示垂直滚动两级列表的条目，只允许两个层次

整体思路：

要给ExpandableListView设置适配器，那么必须先设置数据源。

数据源，就是此处的适配器类ExpandableAdapter，需要重写里面的几个方法

数据源中用到了自定义的View布局，此时根据自己的需求来设置组和子项的布局样式，getChildView()和getGroupView()方法设置自定义布局

<ExpandableListView  
    android:id="@+id/expand"  
    android:layout\_width="match\_parent"  
    android:layout\_height="wrap\_content"/>

    expand.setAdapter(new MyExpandableAdapter());  
    expand.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {  
        @Override  
        public boolean onGroupClick(ExpandableListView expandableListView, View view, int i, long l) {

            return false;  
        }  
    });  
    expand.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {  
        @Override  
        public boolean onChildClick(ExpandableListView expandableListView, View view, int i, int i1, long l) {  
            Toast.makeText(MainActivity.this, childs\[i\]\[i1\].toString(), Toast.LENGTH\_SHORT).show();  
            return false;  
        }  
    });

    expand.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {  
        @Override  
        public void onGroupExpand(int groupPosition) {

            // 保证每次只展开一组  
            int count = expand.getExpandableListAdapter().getGroupCount();

            for (int i = 0; i < count; i++) {

                if (groupPosition != i) {

                    expand.collapseGroup(i);  
                }  
            }  
        }  
    });

//适配器
class MyExpandableAdapter extends BaseExpandableListAdapter {

    @Override  
    public int getGroupCount() {  
        return groups.length;  
    }

    @Override  
    public int getChildrenCount(int groupPosition) {  
        return childs\[groupPosition\].length;  
    }

    @Override  
    public Object getGroup(int groupPosition) {  
        return groups\[groupPosition\];  
    }

    @Override  
    public Object getChild(int groupPosition, int childPostion) {  
        return childs\[groupPosition\]\[childPostion\];  
    }

    @Override  
    public long getGroupId(int groupPosition) {  
        return groupPosition;  
    }

    @Override  
    public long getChildId(int groupPosition, int childPostion) {  
        return childPostion;  
    }

    @Override  
    public boolean hasStableIds() {  
        return false;  
    }

    @Override  
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {  
        if (convertView == null) {  
            convertView = getLayoutInflater().inflate(R.layout.group\_layout, null);  
        }  
        ImageView ime = (ImageView) convertView.findViewById(R.id.im\_ex);  
        TextView tve = (TextView) convertView.findViewById(R.id.tv\_ex);  
        tve.setText(groups\[groupPosition\]);  
        return convertView;  
    }

    @Override  
    public View getChildView(int groupPosition, int childPostion, boolean isLastChild, View convertView, ViewGroup viewGroup) {  
        if (convertView == null) {  
            convertView = getLayoutInflater().inflate(R.layout.child\_layout, null);  
        }  
        ImageView imec = (ImageView) convertView.findViewById(R.id.im\_exc);  
        TextView tvec = (TextView) convertView.findViewById(R.id.tv\_exc);  
        tvec.setText(childs\[groupPosition\]\[childPostion\]);  
        return convertView;  
    }

    //二级菜单是否能被选中  
    @Override  
    public boolean isChildSelectable(int groupPosition, int childPostion) {

        return true;  
    }  
}

group_layout.xml

<ImageView  
    android:id="@+id/im\_ex"  
    android:layout\_width="64dp"  
    android:layout\_height="64dp"  
    android:src="@drawable/pic1" />

<TextView  
    android:id="@+id/tv\_ex"  
    android:layout\_width="wrap\_content"  
    android:layout\_height="wrap\_content"  
    android:text="not Data"  
    android:textSize="18sp"/>

2、ImageSwitcher

ImageSwitcher是Android中控制图片展示效果的一个控件，如：幻灯片效果，粗略的理解就是ImageView的选择器

原理：ImageSwitcher有两个子View：ImageView，当左右滑动的时候，就在这个两个ImageView之间来回切换来显示图片

既然有两个ImageView，我们要创建两个ImageView给ImageSwitcher，创建ImageSwitcher是通过工厂来实现的：ViewFactory

<ImageSwitcher  
    android:id="@+id/imgs"  
    android:layout\_width="match\_parent"  
    android:layout\_height="match\_parent"/>

public class MainActivity extends Activity implements ViewSwitcher.ViewFactory, View.OnTouchListener {

private ImageSwitcher imgs;  
private int\[\] images = {R.drawable.ic\_welcome, R.drawable.iv\_welcome, R.drawable.iv\_welcome1, R.drawable.iv\_welcome2};  
private int index = 0;

float startX = 0.0f;  
float endX = 0.0f;

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

    imgs = (ImageSwitcher) findViewById(R.id.imgs);  
    imgs.setFactory(this);  
    imgs.setOnTouchListener(this);

}

@Override  
public View makeView() {  
    ImageView imageView = new ImageView(this);  
    imageView.setImageResource(images\[0\]);  
    return imageView;  
}

//触屏事件  
@Override  
public boolean onTouch(View view, MotionEvent motionEvent) {

    //获取当前事件的动作  
    int action = motionEvent.getAction();  
    //按住屏幕  
    if (action == MotionEvent.ACTION\_DOWN) {  
        startX = motionEvent.getX();  
        return true;  
    }  
    if (action == MotionEvent.ACTION\_UP) {  
        endX = motionEvent.getX();  
        if (startX - endX > 20) {  
            index = index + 1 < images.length ? ++index : 0;  
            //添加动画  
            imgs.setInAnimation(this, android.R.anim.fade\_in);  
            imgs.setInAnimation(this, android.R.anim.fade\_out);  
        } else if (endX - startX > 20) {  
            index = index - 1 >= 0 ? --index : images.length - 1;  
            imgs.setInAnimation(this, android.R.anim.fade\_in);  
            imgs.setInAnimation(this, android.R.anim.fade\_out);  
        }  
        imgs.setImageResource(images\[index\]);  
    }  
    return true;  
}

}

创建选项菜单的步骤：

覆盖Activity的onCreateOptionMenu(Menu menu)方法，当菜单第一次北大开始调用

调用Menu的add()方法添加菜单项(MenuItem)，同时可以调用MenuItem的setIcon()方法来为菜单项设置图标

当菜单项被选择是，覆盖Activity的onOptionsItemSelected(MenuItem item)响应事件

@Override
public boolean onCreateOptionsMenu(Menu menu) {
//方法1：直接加载menu布局，推荐使用
getMenuInflater().inflate(R.menu.menu_main, menu);

}

    @Override  
public boolean onOptionsItemSelected(MenuItem item) {  
    int id = item.getItemId();  
    if (id == R.id.recycler) {  
        RecyclerActivity.openActivity(MainActivity.this);  
    } else if (id == R.id.mySql) {  
        MySqlActivity.openActivity(MainActivity.this);  
    }  
    return super.onOptionsItemSelected(item);  
}

menu_main.xml

@Override  
public boolean onCreateOptionsMenu(Menu menu) {

    //方法2：单个添加  
    //添加菜单项（参数：组ID没当前选项ID，排序，标题）  
    menu.add(0, 100, 1, "设置");  
    menu.add(0, 200, 2, "开始");  
    menu.add(0, 300, 3, "关闭");  
    return true;  
}

    @Override  
public boolean onOptionsItemSelected(MenuItem item) {  
    int id = item.getItemId();  
    if (id == 100) {  
        Toast.makeText(this,"设置",Toast.LENGTH\_SHORT).show();  
    }  
    return super.onOptionsItemSelected(item);  
}

Context menu

顾名思义，与长下文有关，操作室需要长时间按住某个东西不放，出现菜单。

覆盖Activity的onCreateContextMenu(Menu menu)方法调用Menu的add()方法添加菜单项(MenuItem)

覆盖Activity的onContextItemSelected(MenuItem item)来响应事件

调用registerForContextMenu()方法来为视图注册上下文菜单。

public class MainActivity extends Activity {
private TextView text;

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity\_main);  
    text = (TextView) findViewById(R.id.text);  
    //注册上下文菜单到text组件  
    registerForContextMenu(text);

}

//创建上下文菜单  
@Override  
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {  
    super.onCreateContextMenu(menu, v, menuInfo);  
    getMenuInflater().inflate(R.menu.menu\_main, menu);  
}

//点击事件  
@Override  
public boolean onContextItemSelected(MenuItem item) {  
    int id = item.getItemId();  
    if (id == R.id.recycler) {  
        text.setTextColor(Color.BLUE);  
    } else {  
        text.setTextColor(Color.RED);  
    }  
    return super.onContextItemSelected(item);  
}

}

4.SearchView

SearchView是Android原生的搜索框控件，它提供了一个用户界面，用于用户搜索查询。
SearchView默认是展示一个search的icon，点击icon展开搜索框，如果你想让搜索框默认就展开，可以通过setIconifiedByDefault(false);实现。

SearchView属性

属性名称

相关方法

描述

android:iconifiedByDefault

setIconifiedByDefault（boolean）

设置搜索图标是否显示在搜索框内

android:imeOptions

setImeOptions(int)

设置输入法搜索选项字段，默认是搜索，可以是：下一页、发送、完成等

android:inputType

setInputType(int)

设置输入类型

android:maxWidth

setMaxWidth(int)

设置最大宽度

android:queryHint

setQueryHint(CharSequence)

设置查询提示字符串

使用：

<SearchView  
    android:id="@+id/searchView"  
    android:layout\_width="match\_parent"  
    android:layout\_height="wrap\_content"  
    android:iconifiedByDefault="false"  
    android:queryHint="请输入搜索内容" />

    // 设置搜索文本监听  
    mSearchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {  
        // 当点击搜索按钮时触发该方法  
        @Override  
        public boolean onQueryTextSubmit(String query) {  
            //操作  
            return true;  
        }

        // 当搜索内容改变时触发该方法  
        @Override  
        public boolean onQueryTextChange(String newText) {

            return false;  
        }  
    });

设置SearchView

mSearchView = (SearchView) findViewById(R.id.search);
/**
* 默认情况下, search widget是"iconified“的，只是用一个图标来表示它(一个放大镜),
* 当用户按下它的时候才显示search box . 你可以调用setIconifiedByDefault(false)让search
* box默认都被显示。你也可以调用setIconified()让它以iconified“的形式显示。
*/
mSearchView.setIconifiedByDefault(true);
/**
* 默认情况下是没提交搜索的按钮，所以用户必须在键盘上按下"enter"键来提交搜索.你可以同过setSubmitButtonEnabled(
* true)来添加一个提交按钮（"submit" button)
* 设置true后，右边会出现一个箭头按钮。如果用户没有输入，就不会触发提交（submit）事件
*/
mSearchView.setSubmitButtonEnabled(true);
/**
* 初始是否已经是展开的状态
* 写上此句后searchView初始展开的，也就是是可以点击输入的状态，如果不写，那么就需要点击下放大镜，才能展开出现输入框
*/
mSearchView.onActionViewExpanded();
// 设置search view的背景色
mSearchView.setBackgroundColor(0x22ff00ff);
/**
* 默认情况下, search widget是"iconified“的，只是用一个图标来表示它(一个放大镜),
* 当用户按下它的时候才显示search box . 你可以调用setIconifiedByDefault(false)让search
* box默认都被显示。你也可以调用setIconified()让它以iconified“的形式显示。
*/
mSearchView.setIconifiedByDefault(true);

配置监听器

mSearchView.setOnQueryTextListener(new OnQueryTextListener() {

        private String TAG = getClass().getSimpleName();

        /\*  
         \* 在输入时触发的方法，当字符真正显示到searchView中才触发，像是拼音，在输入法组词的时候不会触发  
         \*/  
        @Override  
        public boolean onQueryTextChange(String queryText) {  
            Log.d(TAG, "onQueryTextChange = " + queryText);  
            return true;  
        }

        /\*  
         \* 输入完成后，提交时触发的方法，一般情况是点击输入法中的搜索按钮才会触发。表示现在正式提交了  
         \*/  
        @Override  
        public boolean onQueryTextSubmit(String queryText) {  
            Log.d(TAG, "onQueryTextSubmit = " + queryText);

            if (mSearchView != null) {  
                // 得到输入管理对象  
                InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT\_METHOD\_SERVICE);  
                if (imm != null) {  
                    // 这将让键盘在所有的情况下都被隐藏，但是一般我们在点击搜索按钮后，输入法都会乖乖的自动隐藏的。  
                    imm.hideSoftInputFromWindow(mSearchView.getWindowToken(), 0); // 输入法如果是显示状态，那么就隐藏输入法  
                }  
                mSearchView.clearFocus(); // 不获取焦点  
            }  
            return true;  
        }  
    });

在ActionBar上使用SearchView

public boolean onCreateOptionsMenu(Menu menu) {

    super.onCreateOptionsMenu(menu);  
    getMenuInflater().inflate(R.menu.search, menu);

    MenuItem search = menu.findItem(R.id.action\_search);  
    /\*\*  
     \* 初始是否已经是展开的状态  
     \* 写上此句后searchView初始展开的，也就是是可以点击输入的状态，如果不写，那么就需要点击下放大镜，才能展开出现输入框  
     \*/  
    search.collapseActionView();  
    SearchView searchview = (SearchView) MenuItemCompat.getActionView(search);  
    searchview.setOnQueryTextListener(new SearchView.OnQueryTextListener() {  
        @Override  
        public boolean onQueryTextSubmit(String query) {  
            lvJxwh.requestFocus();  
            srch\_bt = query;  
            request();  
            return true;  
        }

        @Override  
        public boolean onQueryTextChange(String newText) {  
            return false;  
        }  
    });

    return true;  
}

5、弹出式菜单

弹出菜单是停靠在一个View上的模式菜单。如果View对象下方有空加，那么弹出菜单将显示在停靠对象的下方，否则会显示在上方。

public class MainActivity extends Activity {
private Button btn;

@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity\_main);  
    btn = (Button) findViewById(R.id.btn);

    btn.setOnClickListener(new View.OnClickListener() {  
        @Override  
        public void onClick(View view) {  
            //创建弹出式菜单  
            PopupMenu popupMenu = new PopupMenu(MainActivity.this, view);  
            MenuInflater inflater = popupMenu.getMenuInflater();  
            inflater.inflate(R.menu.menu\_main, popupMenu.getMenu());  
            popupMenu.show();

            //设置点击事件  
            popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {  
                @Override  
                public boolean onMenuItemClick(MenuItem menuItem) {  
                    switch (menuItem.getItemId()) {  
                        case R.id.recycler:  
                            Toast.makeText(MainActivity.this, "recycler", Toast.LENGTH\_SHORT).show();  
                            break;  
                        case R.id.mySql:  
                            Toast.makeText(MainActivity.this, "mySql", Toast.LENGTH\_SHORT).show();  
                            break;  
                    }  
                    return false;  
                }  
            });  
        }  
    });

}

}

6、ViewPager

VeiwPager 是一个ViewGroup，可以包含很多的View，当手指在屏幕上左右滑动的时候，可以切换界面。可以做很多事情，从最简单的导航，到页面菜单等。用法与ListView类似，也需要一个适配器，就是PagerAdapter。

ViewPager一般与Fragment结合使用比较方便。

ViewPager+Fragment可以做出多页面滑动的效果，让我们的应用程序界面操作起来更加灵活

ViewPager滑动事件讲解：

首先ViewPager在处理滑动事件时要用到OnPageChangeListener

OnPageChangeListener这个接口需要实现三个方法：（onPageScrollStateChanged，onPageScrolled ，onPageSelected）

onPageScrollStateChanged(int arg0) ，此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。arg0 ==1的时表示正在滑动，arg0==2的时表示滑动完毕了，arg0==0的时表示什么都没做。

onPageScrolled(int arg0,float arg1,int arg2) ，当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。其中三个参数的含义分别为：

arg0 :当前页面，及你点击滑动的页面

arg1:当前页面偏移的百分比

arg2:当前页面偏移的像素位置

onPageSelected(int arg0) ：此方法是页面跳转完后得到调用，arg0是你当前选中的页面的Position（位置编号）。

一、使用ViewPager

ViewPager的使用与ListView使用类似，也要绑定相应的适配器。

ViewPager的使用主要分3个步骤：

1、在布局文件中添加ViewPager控件。注意：写这个控件的时候要写全称（包名+类名）

<android.support.v4.view.PagerTabStrip  
    android:id="@+id/pagertab"  
    android:layout\_width="wrap\_content"  
    android:layout\_height="wrap\_content"  
    android:layout\_gravity="top" />

PagerTabTrip要当做ViewPager的一个子标签来用，可以用android:layout_gravity=TOP|BOTTOM来制定title的位置，如果要显示出PagerTabTrip的某一项Title，需要在ViewPager的Adapter中实现getPageTitle(int)。

instantiateItem(ViewGroup,int)//实例化页卡

destroyItem(ViewGroup,int,Object)//删除页卡

getCount()//返回页卡的数量

isViewFromObject(View,Object)//判断两个对象是否相等

getPageTitle(int position)//设置标签显示的标题

设置指示标签的属性：

pagerTabStrip.setTabIndicatorColor();//指示器的颜色

pagerTabStrip.setBackgroundColor();//背景色

pagerTabStrip.setTextColor(Color.WHITE);//设置字体颜色

2、加载要显示的界面，并把要显示的页面放入数组或List集合中

LayoutInflater lf = getLayoutInflater().from(this);

  view1 = lf.inflate(R.layout.layout1, null);  

  view2 = lf.inflate(R.layout.layout2, null);  

  view3 = lf.inflate(R.layout.layout3, null);  

  viewList = new ArrayList<View>();

  viewList.add(view1);  

  viewList.add(view2);  

  viewList.add(view3);

3、在Activity里实例化ViewPager组件，并设置它的Adapter，一般需要重写PagerAdapter。（和ListView使用差不多，使用步骤也类似。）

ViewPager的方法：

setAdapter()：ViewPager通过setAdapter()来建立与PagerAdapter的联系。这个联系是双向的，一方面，，ViewPager会拥有PagerAdapter对象，从而可调用PagerAdapter的方法，另一方面，ViewPager会在setAdapter()中调用PagerAdapter的registerDataSetObserver()方法，注册一个自己生成的PagerObserver 对象，从而在 PagerAdapter 有所需要时（如 notifyDataSetChanged() 或 notifyDataSetInvalidated() 时），可以调用 Observer 的 onChanged() 或 onInvalidated() 方法，从而实现 PagerAdapter 向 ViewPager 方向发送信息。
dataSetChanged()：在 PagerObserver.onChanged()，以及 PagerObserver.onInvalide() 中被调用。因此当 PagerAdapter.notifyDataSetChanged() 被触发时，ViewPager.dataSetChanged() 也可以被触发。该函数将使用 getItemPosition() 的返回值来进行判断，如果为 POSITION_UNCHANGED，则什么都不做；如果为 POSITION_NONE，则调用 PagerAdapter.destroyItem() 来去掉该对象，并设置为需要刷新 (needPopulate = true) 以便触发 PagerAdapter.instantiateItem() 来生成新的对象。

二、PagerAdapter

PagerAdapter是ViewPager的支持者，ViewPager将调用它来取得所需展示的页面，而PagerAdapter也会在数据变化时通知ViewPager。这个类也是FragmentPagerAdapter以及FragmentStatePagerAdapter的基类。如果继承此类，至少需要实现instantiateItem(),destroyItem(),getCount()以及isViewFromObject()四个方法。

instantiateItem():在每次ViewPager需要一个用以显示Object的时候，该方法都会被ViewPager.addNewItem()方法调用。该方法内部一定要把指定位置要显示的视图添加到ViewPager中。
destroyItem():从当前的ViewPager容器中删除指定位置的View对象。
getCount():返回要滑动的View的个数。
isViewFromObject():该方法用来判断instantiateItem(ViewGroup , int)函数所返回来的key与一个页面视图是否是代表的同一个视图（即他俩是否是对应的，对应的表示同一个view）返回值：如果对应的是同一个View，返回ture，否则返回false

三、ViewPager添加标题

给ViewPager添加一个子标签

2.覆写PagerAdapter的getPageTitle(position)方法，该方法返回每个界面的title

@Override
public CharSequence getPageTitle(int position){}

注意：还有一种标题是android.support.v4.view.PagerTabStrip用法与上面的完全一样，唯一区别就是每个标题下面添加了一个下划线，并且标题也可点击

四、给ViewPager添加监听器OnPageChageListner

pager.setOnPageChangeListener(new OnPageChangeListener() {
/**
* 当滑动结束后，新的pager完全显示到屏幕后会调用该方法
* 参数：新的pager的index
*/
@Override
public void onPageSelected(int arg0) {
// Log.e(TAG, "onPageSelected…" + arg0);
}

        /\*\*  
         \* 当正在滑动时，会一直回调该方法  
         \* arg0 :当前页面，及你点击滑动的页面  
         \* arg1:当前页面偏移的百分比  
         \* arg2:当前页面偏移的像素位置  
         \*/  
        @Override  
        public void onPageScrolled(int arg0, float arg1, int arg2) {

// Log.e(TAG, "onPageScrolled…" + arg0 + " " + arg1 + " " + arg2);
}
/**
* 当状态方法改变的时候调用
* 参数：页面的状态
* 共有三种状态：
* SCROLL_STATE_IDLE 页面静止的时候的状态
SCROLL_STATE_DRAGGING 正在滑动的状态
SCROLL_STATE_SETTLING 到了要滑动的最终位置的状态
*/
@Override
public void onPageScrollStateChanged(int arg0) {
//
String msg = "";
switch (arg0) {
case ViewPager.SCROLL_STATE_DRAGGING:
msg = "正在滑动";
break;
case ViewPager.SCROLL_STATE_IDLE:
msg = "静止了";
break;
case ViewPager.SCROLL_STATE_SETTLING:
msg = "到了";
break;

            default:  
                break;  
            }  
            Log.e(TAG, "onPageScrollStateChanged..." + msg);  
        }  
    });

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

Android13深入了解 Android 小窗口模式和窗口类型

使用Java来开发物联网应用

【.NET 深呼吸】全代码编写WPF程序

【HarmonyOS】一文教你如何在H5页面中使用电话、定位及导航

Android Studio中SQLite的使用，主要介绍sqlite插入和读出图片（ViewBinder）的操作方法

Flutter系列文章-实战项目

插件化工程R文件瘦身技术方案 | 京东云技术团队

Android13冻结进程分析：如何提高设备性能和用户体验

音频编辑服务UI SDK接入指导及常见问题

Android实时获取摄像头画面传输至PC端