android中可左右滑动输入框

　　在网上无意看到一个UI动画，用户输入身份证信息时可以左右滑动输入框进行输入，并且信息可以实时显示。闲下之余，自己就动手用代码实现出来了，废话不多说，开始讲讲如何实现制作的。

1，布局制作
　　先写一个主界面avtivity_main，这里只是显示界面，为了便于实现交互，使用FrameLayout实现主要界面，布局填充。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:orientation="vertical"><LinearLayout
        android:layout_width="match_parent"android:layout_height="50dp"android:background="#FC9B18"android:gravity="center"android:orientation="horizontal"><TextView
            android:id="@+id/tv_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="身份证信息"android:textColor="#fff"android:textSize="22sp" /></LinearLayout><LinearLayout
        android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayout
            android:id="@+id/frame"android:layout_width="match_parent"android:layout_height="match_parent"></FrameLayout></LinearLayout>
</LinearLayout>

　　下面是主要界面fragment_pager，用于展示输入界面和显示输入内容，没有使用权重，因为弹出的输入框是放在ViewPager中，如果使用权重比例，会影响效果。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/mainview"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#EFEFEF"android:orientation="vertical" ><LinearLayout
        android:layout_width="wrap_content"android:layout_height="180dp"android:layout_marginLeft="22dp"android:layout_marginRight="22dp"android:layout_marginTop="10dp"android:background="@drawable/papers_bag"android:orientation="vertical"android:paddingLeft="22dp" ><TextView
            android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:text="证件信息"android:textColor="#9fffffff"android:textSize="16sp" /><View
            android:layout_width="190dp"android:layout_height="1dp"android:layout_marginTop="8dp"android:background="#80ffffff" ></View><LinearLayout
            style="@style/papers_bag"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><TextView
                style="@style/papers_textview_type"android:layout_width="wrap_content"android:layout_height="match_parent"android:text="姓名" /><TextView
                android:id="@+id/tv_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="4dp"android:text="唯一"android:textColor="#80ffffff"android:textSize="14sp" /></LinearLayout><LinearLayout
            style="@style/papers_bag"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><TextView
                style="@style/papers_textview_type"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="证件类型" /><TextView
                android:id="@+id/tv_pager"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="4dp"android:text="身份证"android:textColor="#80ffffff"android:textSize="14sp" /></LinearLayout><LinearLayout
            style="@style/papers_bag"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><TextView
                style="@style/papers_textview_type"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="证件号码" /><TextView
                android:id="@+id/tv_nume"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="4dp"android:text="4654986546549894"android:textColor="#80ffffff"android:textSize="14sp" /></LinearLayout></LinearLayout><LinearLayout
        android:id="@+id/ll_erview"android:layout_width="match_parent"android:layout_height="match_parent"android:clipChildren="false"android:gravity="center_horizontal"android:orientation="vertical" ><android.support.v4.view.ViewPager
            android:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="100dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_marginTop="10dp"android:clipChildren="false"android:focusable="true"android:focusableInTouchMode="true"android:visibility="gone" ></android.support.v4.view.ViewPager><TextView
            android:id="@+id/tv_sname"android:layout_width="match_parent"android:layout_height="55dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_marginTop="10dp"android:background="@drawable/shape_rectangle"android:gravity="center_vertical"android:paddingLeft="20dp"android:text="姓名"android:textSize="12sp" /><TextView
            android:id="@+id/tv_spager"android:layout_width="match_parent"android:layout_height="55dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_marginTop="16dp"android:background="@drawable/shape_rectangle"android:gravity="center_vertical"android:paddingLeft="20dp"android:text="证件类型"android:textSize="12sp" /><TextView
            android:id="@+id/tv_snume"android:layout_width="match_parent"android:layout_height="55dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_marginTop="16dp"android:background="@drawable/shape_rectangle"android:gravity="center_vertical"android:paddingLeft="20dp"android:text="证件号"android:textSize="12sp"android:visibility="visible" /><Button
            android:id="@+id/bt_next"android:layout_width="320dp"android:layout_height="55dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:layout_marginTop="16dp"android:background="@drawable/identity_selector"android:text="下一步"android:textColor="#ffffff"android:textSize="24sp" ></Button></LinearLayout></LinearLayout>

左右滑动输入布局item，在ViewPager中放置控件EditView，详见代码实例

2、代码逻辑
　　一个Activity，一个Fragment，当然使用ViewPager肯定少不了Adapter，将主要代码编写在里Fragment中，这里实现主要逻辑。
　　在Adapter中EditPagerAdapter继承PargerAdapter，重写instantiateItem（）方法，将ItemView初始化成ViewPager对象。这样含有EditView的ViewPager就可以实现左右滑动的效果。　　

@Overridepublic Object instantiateItem(ViewGroup container, int position) {position = position % listView.size();if (position < 0) {position = listView.size() + position;}View view = listView.get(position);// 如果View已经在之前添加到了一个父组件，则必须先remove，否则会抛出IllegalStateException。ViewParent vp = view.getParent();if (vp != null) {ViewGroup parent = (ViewGroup) vp;parent.removeView(view);}((ViewPager) container).addView(view);return view;}

　　DepthPageTransformer是网上找到的工具类，来实现ViewPager两侧若隐若现的效果，通过viewpager中setPageMargin（）方法，传入设置的间距，可使效果更加明显。

　　这里讲一下ViewPager中EditView与软键盘的交互：
　　1.在身份证、姓名等的地方是TextView，当点击时同时弹出ViewPager与软键盘
　　2.根据软键盘隐藏和显示，整个view布局发生的高度变化，来判断ViewPager显示状态
　　注意：初始化ViewPager中EditView以及键盘焦点获取必须要在Activity生命周期onResume()中，因为在oncreate中View.getWidth和View.getHeight无法获得一个view的高度和宽度，这是因为View组件布局要在onResume回调后完成。

　　通过getViewTreeObserver().addOnGlobalLayoutListener()来获得宽度或者高度。这是获得整体view的宽度和高度的方法之一。
　　OnGlobalLayoutListener 是ViewTreeObserver的内部类，当一个视图树的布局发生改变时，可以被ViewTreeObserver监听到，这是一个注册监听视图树的观察者(observer)，在视图树的全局事件改变时得到通知。ViewTreeObserver不能直接实例化，而是通过getViewTreeObserver()获得。

　　这里定义为大于或小于500时，也可以实现大于小于布局整体高度的三分之一，这样更有利于适配。

// 根据界面弹出键盘布局整体高度发生变化来判断当键盘弹出时显示输入框，当键盘隐藏时同时隐藏滑动输入框mainView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {// TODO Auto-generated method stubint heightDill = mainView.getRootView().getHeight()- mainView.getHeight();int height = mainView.getRootView().getHeight();int height2 = mainView.getHeight();//if (heightDill > 500) {viewpager.setVisibility(View.VISIBLE);} else {viewpager.setVisibility(View.GONE);}}});

　　下面是获取软键盘的方法，当点击身份证、姓名等的地方TextView获取软键盘。

private void getSoftKef(final View v) {InputMethodManager m = (InputMethodManager) v.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);m.toggleSoftInput(0, InputMethodManager.HIDE_NOT_ALWAYS);}

private void initView(int num) {for (int i = 0; i < num; i++) {View itemView = View.inflate(getActivity(),R.layout.viewpager_item, null);TextView tv_item = (TextView) itemView.findViewById(R.id.tv_item);et_item = (EditText) itemView.findViewById(R.id.et_item);et_item.requestFocus();//给editText获取软键盘焦点final InputMethodManager intputManager = (InputMethodManager) et_item.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);ImageView iv_item = (ImageView) itemView.findViewById(R.id.iv_item);if (i == 0) {tv_item.setText("姓名");onTextWatcher(tv_name, tv_sname);iv_item.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {viewpager.setCurrentItem(1);} });} else if (i == 1) {tv_item.setText("证件类型");onTextWatcher(tv_pager, tv_spager);iv_item.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {viewpager.setCurrentItem(2);}});} else if (i == 2) {tv_item.setText("证件号");onTextWatcher(tv_nume, tv_snume);iv_item.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {intputManager.hideSoftInputFromWindow(et_item.getWindowToken(), 0);}});}listView.add(itemView);}}

3**总结**

　　此实例充分运用ViewPager左右滑动的效果，Fragment，视图树监听整体布局的变化来实现，使输入框更加炫酷，运用在项目也是不错的动画效果，不足之处屏幕适配不够好，在2560*1440像素中，滑动的ViewPager会变的比较小，而且在底部与软键盘间距较大。这个问题后期需要优化，有兴趣的朋友有什么好的方案可以给我留言

下面是github上eclipse版本源代码下载地址：https://github.com/ComeonSZH/EditViewSlide

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　我是一只奋斗的菜鸟

android中可左右滑动输入框相关推荐

android中view手势滑动冲突的两种解决方法
android中view手势滑动冲突的解决方法,主要解决方法有两种,外部和内部拦截.有需要的可以参考下. Android手势事件的冲突跟点击事件的分发过程息息相关,由三个重要的方法来共同完成,分别是: ...
Android中实现照片滑动时左右进出的动画的xml代码
场景 Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
Android中实现页面滑动——ViewPager
ViewPager可以实现多页面滑动切换以及动画效果,在很多开发场合都十分常用,不仅方便实用而且功能强大.ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的v ...
android viewpager 滑动方法,Android中Viewpager禁止滑动的实现
前言现在很多app,首页不允许滑动切换(因为页面加载吧),但是又用viewpage来管理frgament.因为方便嘛. 以前在网上找的例子: public class NoScrollViewPag ...
Android中禁止WebView滑动
参考网址:https://blog.csdn.net/Agg_bin/article/details/82226304 https://www.cnblogs.com/renhui/articles/ ...
Android中的自定义View（一）
文章收藏的好句子:成功从来不是一蹴而就,而是日积月累的努力叠加的结果. ps:本文是基于 Android API 31 来分析的,文章写的 demo 是用 AndroidStudio 工具来开发的. ...
Android中实现整个视图切换的左右滑动效果
Android中提供了一个Gallary,可以实现图片或者文本的左右滑动效果. 如何让整个视图都能实现左右滑动,达到类似于Gallary的效果呢?可以直接用一个开源的ViewFlow来实现. 项目 ...
Android中实现滑动翻页—使用ViewFlipper
有一些场景,我们需要向用户展示一系列的页面.比如我们正在开发一个看漫画的应用,可能就需要向用户展示一张一张的漫画图片,用户使用手指滑动屏幕,可以在前一幅漫画和后一幅漫画之间切换.这个时候ViewFli ...
android列表滑到底部,Android中判断listview是否滑动到顶部和底部的实现方法
今天实现listview的下拉刷新和上拉加载的时候,遇到了一个问题,*就是说需要根据listview中滑动的位置来进行下拉刷新和上拉加载.* 具体点,只有当我的listview滑动到最顶部的时候,这时 ...

android中可左右滑动输入框

android中可左右滑动输入框相关推荐

最新文章

热门文章