ViewPager+Fragment实现仿微信首页
用Viewpager加上Fragment可以实现的界面。
这些微信，通讯录，发现，我的图标使用iconfont字体图标，这样清晰度非常的高，很清楚。
主要文件:
MainActivity:
<span style="font-size:18px;">package com.example.dior.fragment_viewpager;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends FragmentActivity implements View.OnClickListener{
private LinearLayout tab_weixin;
private LinearLayout tab_phone;
private LinearLayout tab_find;
private LinearLayout tab_my;
private TextView text_weixin;
private TextView text_phone;
private TextView text_find;
private TextView text_my;
private TextView iconfont_weixin;
private TextView iconfont_phone;
private TextView iconfont_find;
private TextView iconfont_my;
private Fragment tab01;
private Fragment tab02;
private Fragment tab03;
private Fragment tab04;
private ViewPager mviewpager;
private FragmentPagerAdapter mAdapter;
List<Fragment> mFragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
initView();
initEvents();
}
private void initView(){
Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont.ttf");
Typeface phone = Typeface.createFromAsset(getAssets(), "phone.ttf");
mviewpager = (ViewPager)findViewById(R.id.id_viewpager);
tab_weixin = (LinearLayout)findViewById(R.id.id_tab_weixin);
tab_phone = (LinearLayout)findViewById(R.id.id_tab_phone);
tab_find = (LinearLayout)findViewById(R.id.id_tab_find);
tab_my = (LinearLayout)findViewById(R.id.id_tab_my);
text_weixin = (TextView)findViewById(R.id.id_text_weixin);
text_phone = (TextView)findViewById(R.id.id_text_phone);
text_find = (TextView)findViewById(R.id.id_text_find);
text_my = (TextView)findViewById(R.id.id_text_my);
iconfont_weixin = (TextView)findViewById(R.id.id_iconfont_weixin);
iconfont_phone= (TextView)findViewById(R.id.id_iconfont_phone);
iconfont_find = (TextView)findViewById(R.id.id_iconfont_find);
iconfont_my = (TextView)findViewById(R.id.id_iconfont_my);
iconfont_weixin.setTypeface(iconfont);
iconfont_phone.setTypeface(phone);
iconfont_find.setTypeface(iconfont);
iconfont_my.setTypeface(iconfont);
tab01 = new WeixinFragment();
tab02 = new PhoneFragment();
tab03 = new FindFragment();
tab04 = new MyFragment();
mFragments = new ArrayList<Fragment>();
mFragments.add(tab01);
mFragments.add(tab02);
mFragments.add(tab03);
mFragments.add(tab04);
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public android.support.v4.app.Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
};
mviewpager.setAdapter(mAdapter);
}
private void initEvents(){
tab_weixin.setOnClickListener(this);
tab_phone.setOnClickListener(this);
tab_find.setOnClickListener(this);
tab_my.setOnClickListener(this);
mviewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mviewpager.setCurrentItem(position);
switch (position){
case 0:
setSelect(0);
break;
case 1:
setSelect(1);
break;
case 2:
setSelect(2);
break;
case 3:
setSelect(3);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void resetAll(){
text_weixin.setTextColor(getResources().getColor(R.color.normal));
text_phone.setTextColor(getResources().getColor(R.color.normal));
text_find.setTextColor(getResources().getColor(R.color.normal));
text_my.setTextColor(getResources().getColor(R.color.normal));
iconfont_weixin.setText(getString(R.string.weixin_normal));
iconfont_phone.setText(getString(R.string.phone_normal));
iconfont_find.setText(getString(R.string.find_normal));
iconfont_my.setText(getString(R.string.my_normal));
}
public void onClick(View v){
switch (v.getId()){
case R.id.id_tab_weixin:
setSelect(0);
break;
case R.id.id_tab_phone:
setSelect(1);
break;
case R.id.id_tab_find:
setSelect(2);
break;
case R.id.id_tab_my:
setSelect(3);
break;
}
}
private void setSelect(int id){
resetAll();
switch (id){
case 0:
text_weixin.setTextColor(getResources().getColor(R.color.pressed));
iconfont_weixin.setText(getString(R.string.weixin_pressed));
break;
case 1:
text_phone.setTextColor(getResources().getColor(R.color.pressed));
iconfont_phone.setText(getString(R.string.phone_pressed));
break;
case 2:
text_find.setTextColor(getResources().getColor(R.color.pressed));
iconfont_find.setText(getString(R.string.find_pressed));
break;
case 3:
text_my.setTextColor(getResources().getColor(R.color.pressed));
iconfont_my.setText(getString(R.string.my_pressed));
break;
}
mviewpager.setCurrentItem(id);
}
}</span>
四个Fragment就是中间的部分有四个可以切换:
<span style="font-size:18px;">package com.example.dior.fragment_viewpager;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class WeixinFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab01, container, false);
}
}
</span>
下面为xml布局文件:
activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<include layout="@layout/head"/>
<include layout="@layout/top"/>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom"/>
</LinearLayout>
<?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="55dp"
android:background="@color/white">
<LinearLayout
android:id="@+id/id_tab_weixin"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/id_iconfont_weixin"
android:textSize="30sp"
android:background="#00000000"
android:text="@string/weixin_pressed"/>
<TextView
android:id="@+id/id_text_weixin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="@color/pressed"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_phone"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/id_iconfont_phone"
android:textSize="30sp"
android:background="#00000000"
android:text="@string/phone_normal"/>
<TextView
android:id="@+id/id_text_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录"
android:textColor="@color/normal"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_find"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/id_iconfont_find"
android:textSize="30sp"
android:background="#00000000"
android:text="@string/find_normal"/>
<TextView
android:id="@+id/id_text_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发现"
android:textColor="@color/normal"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_my"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/id_iconfont_my"
android:textSize="30sp"
android:background="#00000000"
android:text="@string/my_normal"/>
<TextView
android:id="@+id/id_text_my"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我"
android:textColor="@color/normal"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
head.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="22dp"
android:background="#282828">
</LinearLayout>
四个tab的布局都是一样的：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#43a1e4"
android:text="This is Weixin Tab"/>
</LinearLayout>
</ScrollView>
配置文件string.xml
<resources>
<string name="app_name">微信</string>
<string name="action_settings">Settings</string>
<string name="weixin_normal"></string>
<string name="weixin_pressed"></string>
<string name="phone_normal"></string>
<string name="phone_pressed"></string>
<string name="find_normal"></string>
<string name="find_pressed"></string>
<string name="my_normal"></string>
<string name="my_pressed"></string>
</resources>
最后附上源代码: ViewPager+Fragment