使用Fragment 仿微信切换页面
1、Fragment的产生与介绍
Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视。针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后拷贝一份,修改布局以适应平板神马超级大屏的。难道无法做到一个App可以同时适应手机和平板么,当然了,必须有啊。Fragment的出现就是为了解决这样的问题。你可以把Fragment当成Activity的一个界面的一个组成部分,甚至Activity的界面可以完全有不同的Fragment组成,更帅气的是Fragment拥有自己的生命周期和接收、处理用户的事件,这样就不必在Activity写一堆控件的事件处理的代码了。更为重要的是,你可以动态的添加、替换和移除某个Fragment。
其生命周期为:
而Activity的生命周期为:
可以看到Fragment比Activity多了几个额外的生命周期回调方法:
onAttach(Activity)
当Fragment与Activity发生关联时调用。
onCreateView(LayoutInflater, ViewGroup,Bundle)
创建该Fragment的视图
onActivityCreated(Bundle)
当Activity的onCreate方法返回时调用
onDestoryView()
与onCreateView想对应,当该Fragment的视图被移除时调用
onDetach()
与onAttach相对应,当Fragment与Activity关联被取消时调用
注意:除了onCreateView,其他的所有方法如果你重写了,必须调用父类对于该方法的实现
效果图为:
开始动手咯
新建四个外形资源
rb_select_contact.xml , rb_select_find.xml , rb_select_my.xml , rb_select_weixin.xml
rb_select_contact.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="@drawable/dashing_start"></item>
<item android:state_checked="true" android:drawable="@drawable/dashing_end"></item>
</selector>
rb_select_find.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/angle_start"></item>
<item android:state_checked="true" android:drawable="@drawable/angle_end"></item>
</selector>
rb_select_my.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/demon_start"></item>
<item android:state_checked="true" android:drawable="@drawable/demon_end"></item>
</selector>
rb_select_weixin.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="false" android:drawable="@drawable/asleep_start"></item>
<item android:state_checked="true" android:drawable="@drawable/asleep_end"></item>
</selector>
外形资源:当android:state_checked 为 false 时 就是未点击,当android:state_checked 为 true 时 就是点击
然后动手,新建布局文件
activity_main.xml 代码为:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context="androidstudio.myapplication.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/vp_main_viewPager"
></android.support.v4.view.ViewPager>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/rg_main_RadioGroup"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
>
<RadioButton
android:id="@+id/rb_main_weixin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wei信聊天"
android:button="@null"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:checked="true"
android:drawableTop="@drawable/rb_select_weixin"
/>
<RadioButton
android:id="@+id/rb_main_contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wei信通讯录"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableTop="@drawable/rb_select_contact"
android:button="@null"
/>
<RadioButton
android:id="@+id/rb_main_find"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wei信发现"
android:button="@null"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableTop="@drawable/rb_select_find"
/>
<RadioButton
android:id="@+id/rb_main_my"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="wei信个人界面"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableTop="@drawable/rb_select_my"
android:button="@null"
/>
</RadioGroup>
</LinearLayout>
contact_fragment.xml 代码为:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:layout_height="wrap_content"
android:text="这里是wei信通讯录界面"
android:textSize="32sp"
/>
</LinearLayout>
find_fragment.xml 代码为:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:layout_height="wrap_content"
android:text="这里是wei信发现界面"
android:textSize="32sp"
/>
</LinearLayout>
my_fragment.xml 代码为:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:layout_height="wrap_content"
android:text="这里是wei信的个人界面"
android:textSize="32sp"
/>
</LinearLayout>
weixin_fragment.xml 代码为:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:layout_height="wrap_content"
android:text="这里是wei信聊天界面"
android:textSize="32sp"
/>
</LinearLayout>
然后就是 java 代码咯~~~
ContactFragment.java代码为:
package androidstudio.myapplication;
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;
/**
* Created by Administrator on 2017/6/14.
*/
public class ContactFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.contact_fragment,null);
}
}
FindFragment.java 代码为:
package androidstudio.myapplication;
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;
/**
* Created by Administrator on 2017/6/14.
*/
public class FindFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.find_fragment,null);
}
}
MyFragment.java 代码为:
package androidstudio.myapplication;
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;
/**
* Created by Administrator on 2017/6/14.
*/
public class MyFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.my_fragment,null);
}
}
WeiXinFragment.java 代码为:
package androidstudio.myapplication;
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;
/**
* Created by Administrator on 2017/6/14.
*/
public class WeiXinFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.weixin_fragment,null);
}
}
到了最重要的一步啦!Activity是怎么使用Fragment的呢? 代码解释在代码中呦!
MainActivity.java 代码为:
package androidstudio.myapplication;
import android.support.annotation.IdRes;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager vp_main_viewPager;
private List<Fragment> fragments = new ArrayList<>();
private RadioGroup rg_main_radioGroup;
private List<View> viewList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取 ViewPager 的id
vp_main_viewPager = (ViewPager) findViewById(R.id.vp_main_viewPager);
//获取RadioGroup的id
rg_main_radioGroup = (RadioGroup) findViewById(R.id.rg_main_RadioGroup);
//实例化Fragment
ContactFragment contactFragment = new ContactFragment();
FindFragment findFragment = new FindFragment();
MyFragment myFragment = new MyFragment();
WeiXinFragment weiXinFragment = new WeiXinFragment();
//加入Fragment的集合
fragments.add(weiXinFragment);
fragments.add(contactFragment);
fragments.add(findFragment);
fragments.add(myFragment);
//获取RadioGroup 的RadioButton
viewList = rg_main_radioGroup.getTouchables();
//给ViewPager 设置 适配器
vp_main_viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
//设置 四个图标的点击事件 点击突变换界面
rg_main_radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
//更据id 选择 切换的是哪个页面
//0 为 第一个界面
//1 为 第二个界面
//以此类推
switch (checkedId) {
case R.id.rb_main_weixin:
//选择切换的页面
vp_main_viewPager.setCurrentItem(0);
break;
case R.id.rb_main_contact:
vp_main_viewPager.setCurrentItem(1);
break;
case R.id.rb_main_find:
vp_main_viewPager.setCurrentItem(2);
break;
case R.id.rb_main_my:
vp_main_viewPager.setCurrentItem(3);
break;
}
}
});
//ViewPager 的界面滑动事件 界面滑动 图标跟着变动
vp_main_viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
RadioButton rb= (RadioButton) viewList.get(position);
rb.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//设置 适配器
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
}
效果图为:
部分资料转载自:http://blog.csdn.net/lmj623565791/article/details/37970961/
如有不对的地方欢迎指出,谢谢!!
完