Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现
2017-03-24 00:13
591 查看
今天我们来开发商城的首页【输入搜索框】布局和点击右下角图片回到顶部的效果
搜索功能在App中很常见,尤其是在商城类的项目当中,一般都会提供很强大的搜索功能,App的搜索布局一般都是在App的顶部,如下图所示:
下面我们来看看如何实现这个布局效果:
先来看看HomeFragment类,代码如下所示:
HomeFragment类加载的是fragment_home.xml的布局,代码如下所示:
最外层是相对布局:顶部是线性布局,里面有两个TextView; 中间是使用分类型的 RecyclerView 当滑动底部的时候显示跳转到顶部的按钮,两个TextView是使用<include layout="@layout/titlebar"/>把布局包进来的,titlebar布局的代码如下所示:
输入搜索信息框的背景颜色在drawable下实现,代码如下所示:
这样就完成了吗?当去运行程序会报错,我们还少了最重要一步,别忘了我们在fragment_home.xml的布局中用到了RecyclerView,要把RecyclerView的包加载进来,如下图所示:
最后一步要检查RecyclerView的包加载进来是否成功,打开Module:app,如下图所示:
其实就是这一句代码就可以实现回到顶部的效果了。
好了,我们这节先完善到这里,下节继续。
搜索功能在App中很常见,尤其是在商城类的项目当中,一般都会提供很强大的搜索功能,App的搜索布局一般都是在App的顶部,如下图所示:
下面我们来看看如何实现这个布局效果:
先来看看HomeFragment类,代码如下所示:
package com.nyl.shoppingmall.home.fragment; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast; import com.nyl.shoppingmall.R; import com.nyl.shoppingmall.base.BaseFragment; /** * 首页Fragment */ public class HomeFragment extends BaseFragment implements View.OnClickListener { private final static String TAG = HomeFragment.class.getSimpleName(); private TextView tv_search_home; private TextView tv_message_home; private RecyclerView rv_home; private ImageView ib_top; @Override public View initView() { Log.e(TAG,"主页面的Fragment的UI被初始化了"); View view = View.inflate(mContext,R.layout.fragment_home,null); //初始化布局控件 tv_search_home = (TextView) view.findViewById(R.id.tv_search_home); tv_message_home = (TextView) view.findViewById(R.id.tv_message_home); rv_home = (RecyclerView) view.findViewById(R.id.rv_home); ib_top = (ImageView) view.findViewById(R.id.ib_top); //设置点击事件 ib_top.setOnClickListener(this); tv_search_home.setOnClickListener(this); tv_message_home.setOnClickListener(this); return view; } @Override public void initData() { super.initData(); Log.e(TAG,"主页面的Fragment的数据被初始化了"); } @Override public void onClick(View view) { switch (view.getId()){ case R.id.ib_top: //置顶的监听 rv_home.scrollToPosition(0); break; case R.id.tv_search_home: //搜索的监听 Toast.makeText(mContext,"搜索",Toast.LENGTH_SHORT).show(); break; case R.id.tv_message_home: //消息监听 Toast.makeText(mContext,"进入消息中心",Toast.LENGTH_SHORT).show(); break; } } }
HomeFragment类加载的是fragment_home.xml的布局,代码如下所示:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/titlebar" layout="@layout/titlebar"/> <android.support.v7.widget.RecyclerView android:id="@+id/rv_home" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/titlebar" /> <ImageButton android:id="@+id/ib_top" android:layout_width="40dp" android:layout_height="40dp" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="20dp" android:layout_marginRight="20dp" android:background="@mipmap/ic_launcher" android:visibility="visible" /> </RelativeLayout>
最外层是相对布局:顶部是线性布局,里面有两个TextView; 中间是使用分类型的 RecyclerView 当滑动底部的时候显示跳转到顶部的按钮,两个TextView是使用<include layout="@layout/titlebar"/>把布局包进来的,titlebar布局的代码如下所示:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ed3f3f"> <TextView android:id="@+id/tv_search_home" android:layout_width="wrap_content" android:layout_height="35dp" android:layout_gravity="center_vertical" android:layout_marginLeft="10dp" android:layout_weight="1" android:background="@drawable/search_home_shape" android:drawableLeft="@mipmap/home_search_icon" android:drawablePadding="10dp" android:gravity="center_vertical" android:padding="5dp" android:text="输入搜索信息" android:textSize="13sp" /> <TextView android:id="@+id/tv_message_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:drawableTop="@mipmap/new_message_icon" android:text="消息" android:textColor="#fff"/> </LinearLayout>
输入搜索信息框的背景颜色在drawable下实现,代码如下所示:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#fff" /> <corners android:radius="3dp" /> </shape>
这样就完成了吗?当去运行程序会报错,我们还少了最重要一步,别忘了我们在fragment_home.xml的布局中用到了RecyclerView,要把RecyclerView的包加载进来,如下图所示:
最后一步要检查RecyclerView的包加载进来是否成功,打开Module:app,如下图所示:
上面都是讲关于搜索框布局的实现,还有一个地方没有讲到,就是点击右下角图片回到顶部的效果,那么这个功能是怎么实现的呢? HomeFragment类中的onclick方法中rv_home.scrollToPosition(0);如下图所示:
其实就是这一句代码就可以实现回到顶部的效果了。
好了,我们这节先完善到这里,下节继续。
相关文章推荐
- Android商城开发系列(十一)—— 首页秒杀布局实现
- Android商城开发系列(九)—— 首页频道布局的实现
- Android商城开发系列(十三)—— 首页热卖商品布局实现
- Android商城开发系列(十)—— 首页活动广告布局实现
- Android商城开发系列(十二)—— 首页推荐布局实现
- android新特性:商城首页一键回到顶部功能实现(包括ListView, RecyclerView 和 ScrollView)
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- Android开发实现 回到底部和返回顶部(其一)
- Android使用TabHost实现在首页tab再次点击首页tab时,刷新首页数据或者recyclerView回到顶部的需求
- android开发游记:RecycleView 实现复杂首页布局三种方式
- Android开发布局系列: LinearLayout布局实现垂直水平居中
- android开发游记:RecycleView 实现复杂首页布局三种方式
- android开发游记:RecycleView 实现复杂首页布局三种方式
- Android商城开发系列(七)—— 使用RecyclerView展示首页数据
- Android商城开发系列(三)——使用Fragment+RadioButton实现商城底部导航栏
- android开发游记:RecycleView 实现复杂首页布局三种方式
- android开发游记:RecycleView 实现复杂首页布局三种方式
- android开发游记:RecycleView 实现复杂首页布局三种方式
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现