一、简介
实现效果图如下:
屏幕快照 2018-07-30 下午3.35.03.png类似美团主页的底部菜单栏,禁止横向滑动,可以点击tab切换fragment。
采用的框架为Material Design中的tabLayout+ViewPager实现Fragment的切换
二、布局/资源文件
在xml中定义一个tab背景选中和没选中时采用不同的图片,以及不同的字体颜色
2.1 tab的ImageButton背景选择器
selector_home_tab.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_home_red" android:state_selected="true" />
<item android:drawable="@drawable/ic_home_gray" android:state_selected="false" />
</selector>
selector_surround.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_surround_gray" android:state_selected="false" />
<item android:drawable="@drawable/ic_surround_red" android:state_selected="true" />
</selector>
其余三个标签类似
2.2 tab中文字颜色背景选择器
selector_tab_text.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorRed" android:state_selected="true"/>
<item android:color="@color/colorDefaultText" android:state_selected="false"/>
</selector>
2.3 tab item的布局文件
tab_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<LinearLayout
android:layout_width="@dimen/tab_width"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageButton
android:id="@+id/tab_btn"
android:layout_width="match_parent"
android:layout_height="@dimen/image_button_height"
android:background="@drawable/ic_find_gray"
android:clickable="false"/>
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/tab_text_height"
android:text="发现"
android:textColor="@drawable/selector_tab_text"
android:textAlignment="center"
android:id="@+id/tab_text"/>
</LinearLayout>
</LinearLayout>
2.4 Fragment布局文件
这次demo没有写好几种Fragment,而是用同一种Fragment。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="fragment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="@+id/frag_text"/>
</android.support.constraint.ConstraintLayout>
2.5 MainActivity布局文件
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">
<com.meituan.huangdanyang.practise.CustomViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="450dp"
android:orientation="vertical" />
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/colorBoarder"
app:layout_constraintBottom_toTopOf="@+id/menu" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="@dimen/tab_layout_height"
android:id="@+id/menu"
app:layout_constraintBottom_toBottomOf="parent"
app:tabIndicatorHeight="0dp"/>
</android.support.constraint.ConstraintLayout>
三、java文件
3.1 HomeFragment.java
package com.meituan.huangdanyang.practise;
import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class HomeFragment extends BaseFragment {
private final static String ARG_PARAM1 = "text";
private String text;
public HomeFragment() {
// Required empty public constructor
}
/**
* Use this factory method to create a new instance of
* this fragment using the provided parameters.
*
* @param text Parameter text.
* @return A new instance of fragment HomeFragment.
*/
public static HomeFragment newInstance(String text) {
HomeFragment fragment = new HomeFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, text);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
text = getArguments().getString(ARG_PARAM1);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_home, container, false);
TextView textView = view.findViewById(R.id.frag_text);
textView.setText(text);
return view;
}
}
使用newInstance方法创造对象,类似建造者模式,可以构造出不同的对象,给对象中塞入参数。
3.2 ViewPager适配器
HomeFragmentPagerAdapter.java:
package com.meituan.huangdanyang.practise;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
public class HomeFragmentPagerAdapter extends FragmentPagerAdapter {
private int[] tabViewId = {R.drawable.selector_home_tab, R.drawable.selector_surround_tab,
R.drawable.selector_find_tab, R.drawable.selector_order_tab, R.drawable
.selector_my_tab};
private String[] tabName = {"首页", "附近", "发现", "订单", "我的"};
private Context context;
public HomeFragmentPagerAdapter(FragmentManager fm,Context context) {
super(fm);
this.context = context;
}
@Override
public Fragment getItem(int position) {
HomeFragment homeFragment = HomeFragment.newInstance(tabName[position]);
homeFragment.TAG = tabName[position];
return homeFragment;
}
@Override
public int getCount() {
return Math.min(tabViewId.length,tabName.length);
}
public View getTabView(int pos) {
View view = LayoutInflater.from(context).inflate(R.layout.tab_item,null);
TextView textView = view.findViewById(R.id.tab_text);
textView.setText(tabName[pos]);
ImageButton imageButton = view.findViewById(R.id.tab_btn);
imageButton.setBackground(context.getDrawable(tabViewId[pos]));
return view;
}
}
3.3 MainActivity.java
package com.meituan.huangdanyang.practise;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import com.meituan.huangdanyang.practise.BaseActivity;
import java.util.List;
public class MainActivity extends BaseActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
CustomViewPager viewPager = findViewById(R.id.view_pager);
TabLayout tabLayout = findViewById(R.id.menu);
HomeFragmentPagerAdapter adapter = new HomeFragmentPagerAdapter(getSupportFragmentManager(),
this);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
for (int i = 0;i < tabLayout.getTabCount();i++){
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
//设置标签应当对应的view
tab.setCustomView(adapter.getTabView(i));
}
}
}
@Override
protected String getName() {
return "MainActivity";
}
}
3.4 禁止横向滑动
写一个CustomViewPager继承自ViewPager类,在布局中使用。
package com.meituan.huangdanyang.practise;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class CustomViewPager extends ViewPager {
private boolean canScroll = false;
public CustomViewPager(@NonNull Context context) {
super(context);
}
public CustomViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return canScroll && super.onInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return canScroll && super.onTouchEvent(ev);
}
}
CustomViewPager中重写了ViewPager的的事件拦截和触摸事件的方法,不能scroll时,事件拦截器和触摸事件直接返回false,不会调用原本的事件拦截和触摸事件中的实现,返回false意味着这个事件没有分发完毕,还会继续向下分发。
网友评论