Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现

  今天我们来开发商城的首页【输入搜索框】布局和点击右下角图片回到顶部的效果

  搜索功能在App中很常见,尤其是在商城类的项目当中,一般都会提供很强大的搜索功能,App的搜索布局一般都是在App的顶部,如下图所示:

  Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现

  下面我们来看看如何实现这个布局效果:

  先来看看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的包加载进来,如下图所示:

Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现

  最后一步要检查RecyclerView的包加载进来是否成功,打开Module:app,如下图所示:

  Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现

    上面都是讲关于搜索框布局的实现,还有一个地方没有讲到,就是点击右下角图片回到顶部的效果,那么这个功能是怎么实现的呢?

    HomeFragment类中的onclick方法中rv_home.scrollToPosition(0);如下图所示:

  Android商城开发系列(五)—— 商城首页回到顶部和搜索框布局实现

  其实就是这一句代码就可以实现回到顶部的效果了。

  好了,我们这节先完善到这里,下节继续。

上一篇:iOS开发~UI布局(一)初探Size Class


下一篇:Redis常用命令--Keys