我的项目录如下:
第一步:创建activity_bottom.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#ffffff">
<RelativeLayout
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1">
<ImageView
android:id="@+id/main_iamgeview"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@drawable/main2"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/main_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:layout_below="@+id/main_iamgeview"
android:layout_centerHorizontal="true"
android:textSize="12dp"
android:textColor="#707070"/>
RelativeLayout>
<RelativeLayout
android:id="@+id/more_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1">
<ImageView
android:id="@+id/more_iamgeview"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@drawable/more1"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/more_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="更多"
android:layout_below="@+id/more_iamgeview"
android:layout_centerHorizontal="true"
android:textSize="12dp"
android:textColor="#707070"/>
RelativeLayout>
<RelativeLayout
android:id="@+id/mine_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1">
<ImageView
android:id="@+id/mine_iamgeview"
android:layout_width="35dp"
android:layout_height="35dp"
android:src="@drawable/my1"
android:layout_centerHorizontal="true"/>
<TextView
android:id="@+id/mine_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的"
android:layout_below="@+id/mine_iamgeview"
android:layout_centerHorizontal="true"
android:textSize="12dp"
android:textColor="#707070"/>
RelativeLayout>
LinearLayout>
LinearLayout>
第二步:main_activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp">
android.support.v4.view.ViewPager>
<include layout="@layout/activity_bottom"/>
RelativeLayout>
第三步:main_fragment(其他两个一样)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是首页"
android:textColor="#000000"
android:layout_centerInParent="true"/>
RelativeLayout>
第四步:创建MainFragment(其他两个同理)
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.fragmentlayout.R;
public class MainFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.main_fragment, container, false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}
第五步:MainActivity
package com.example.fragmentlayout;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.example.fragmentlayout.Fragment.MainFragment;
import com.example.fragmentlayout.Fragment.MineFragment;
import com.example.fragmentlayout.Fragment.MoreFragment;
import java.util.ArrayList;
public class MainActivity extends FragmentActivity implements View.OnClickListener {
private TextView main_textview,more_textview,mine_textview;
private ImageView main_imageview,more_imageview,mine_imageview;
private RelativeLayout main_layout,more_layout,mine_layout;
private Fragment mainFragment,moreFragment,mineFragment;
private ArrayList mFragmentList;
private FragmentPagerAdapter mFragmentPagerAdapter;
private ViewPager mViewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);//删除自带标题栏(如果继承AppCompatActivity,不起效果,所以继承FragmentActivity)
setContentView(R.layout.activity_main);
initView();
initViewPager();
setSelected(0);//显示第一个Fragment (0代表mainFragment,1代表moreFragment,2代表mineFragment);
}
private void initView() {
mViewPager=(ViewPager)findViewById(R.id.viewpager);
main_imageview=(ImageView)findViewById(R.id.main_iamgeview);
more_imageview=(ImageView)findViewById(R.id.more_iamgeview);
mine_imageview=(ImageView)findViewById(R.id.mine_iamgeview);
main_textview=(TextView)findViewById(R.id.main_textview);
more_textview=(TextView)findViewById(R.id.more_textview);
mine_textview=(TextView)findViewById(R.id.mine_textview);
main_layout=(RelativeLayout)findViewById(R.id.main_layout);
more_layout=(RelativeLayout)findViewById(R.id.more_layout);
mine_layout=(RelativeLayout)findViewById(R.id.mine_layout);
mainFragment=new MainFragment();
moreFragment=new MoreFragment();
mineFragment=new MineFragment();
main_layout.setOnClickListener(this);
more_layout.setOnClickListener(this);
mine_layout.setOnClickListener(this);
mFragmentList=new ArrayList();
mFragmentList.add(mainFragment);
mFragmentList.add(moreFragment);
mFragmentList.add(mineFragment);
}
private void initViewPager() {
//FragmentPagerAdapter缓存Fragment
mFragmentPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
};
mViewPager.setAdapter(mFragmentPagerAdapter);
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//position当前页面,positionOffset当前页面偏移百分比,positionOffsetPixels当前页面偏移像素
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//当前页面跳转另一个页面完毕调用
@Override
public void onPageSelected(int position) {
initImageText();
switch (position){
case 0:
main_imageview.setImageResource(R.drawable.main2);
main_textview.setTextColor(Color.parseColor("#707070"));
break;
case 1:
more_imageview.setImageResource(R.drawable.more2);
more_textview.setTextColor(Color.parseColor("#707070"));
break;
case 2:
mine_imageview.setImageResource(R.drawable.my2);
mine_textview.setTextColor(Color.parseColor("#707070"));
break;
}
}
//state ==1的时表示正在滑动,state==2的时表示滑动完毕了,state==0的时表示什么都没做。
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setSelected(int i) {
switch (i){
case 0:
mViewPager.setCurrentItem(0);
break;
case 1:
mViewPager.setCurrentItem(1);
break;
case 2:
mViewPager.setCurrentItem(2);
break;
}
}
@Override
public void onClick(View v) {
initImageText();
switch (v.getId()){
case R.id.main_layout:
setSelected(0);
main_imageview.setImageResource(R.drawable.main2);
main_textview.setTextColor(Color.parseColor("#707070"));
break;
case R.id.more_layout:
setSelected(1);
more_imageview.setImageResource(R.drawable.more2);
more_textview.setTextColor(Color.parseColor("#707070"));
break;
case R.id.mine_layout:
setSelected(2);
mine_imageview.setImageResource(R.drawable.my2);
mine_textview.setTextColor(Color.parseColor("#707070"));
break;
}
}
//初始化图片和文字(未点击自定义的Tab下样式)
private void initImageText() {
main_imageview.setImageResource(R.drawable.main1);
more_imageview.setImageResource(R.drawable.more1);
mine_imageview.setImageResource(R.drawable.my1);
main_textview.setTextColor(Color.parseColor("#dfdfdf"));
more_textview.setTextColor(Color.parseColor("#dfdfdf"));
mine_textview.setTextColor(Color.parseColor("#dfdfdf"));
}
}