通过慕课的学习现在整理下思路,使用fragment实现微信页面的切换,首先从整体思考:
我们需要先定义mainactivity.java;main.xml;
由于我们的微信是有顶部,中部,还有顶部三部分构成,
所以我们需要把这顶部和底部分别自定义布局,然后用include添加到main.xml.(具体布局看源码),俩个include中间写个linerlayout
然后定义4个fragment和它们的布局文件;
接下来在mainactivity中内实现切换功能.
首先定义我们需要的属性,分别有底部的tab的4个linerlayout,还有其TextView和ImageView,Fragment 1,2,3,4;
在oncreate方法内调用initView()方法实例化它们的属性,然后设置底部的tab的4个linerlayout的点击事件,这个要implements OnClickListener,然后在点击事件中首先要初始化其图片的默认内容,
我们要调用isselect(position)方法来动态添加fragment,调用isselect(position)后我们还要设置点击tab后点击图片的变化。
在isselect(position)的代码中先调用hideFragment方法因为这样会减少每次都要创建fragment的重复创建。还有isselect(position)中switch(position)中if~else的使用也使用的很好,可以想一想,当我们运行这些代码是我们的fragment还没有实例化,这样的话在switch(position)前的hideFragment调用后将不会产生影响,然后接着我们进行if~else判断.
如果fragment没有实例化将实例化并add(R.id.page,fragment1),
这样的话就被添加到页面上了,
如果fragment实例化后将show(fragment),显示内容。
重要思想:这个源码中运行过程中只会有创建一次fragment的实例,其后都是通过show和hide方法来显示的。
在这里的mainactivity中的思路很好。
这个是mainactivity.java
package cn.oddcloud.www.startoveragain7.FragmentDemo;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import cn.oddcloud.www.startoveragain7.R;
public class MainActivity1 extends FragmentActivity implements View.OnClickListener{
LinearLayout layout1;
LinearLayout layout2;
LinearLayout layout3;
LinearLayout layout4;
ImageView img1;
ImageView img2;
ImageView img3;
ImageView img4;
Fragment1 fragment1;
Fragment2 fragment2;
Fragment3 fragment3;
Fragment4 fragment4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.fragmentdemo);
intiView();
intiEvent();
isSelect(0);
}
private void intiEvent() {
layout1.setOnClickListener( this);
layout2.setOnClickListener((View.OnClickListener) this);
layout3.setOnClickListener((View.OnClickListener) this);
layout4.setOnClickListener((View.OnClickListener) this);
}
private void intiView() {
layout1= (LinearLayout) findViewById(R.id.tab1);
layout2= (LinearLayout) findViewById(R.id.tab2);
layout3= (LinearLayout) findViewById(R.id.tab3);
layout4= (LinearLayout) findViewById(R.id.tab4);
img1= (ImageView) findViewById(R.id.image1);
img2= (ImageView) findViewById(R.id.image2);
img3= (ImageView) findViewById(R.id.image3);
img4= (ImageView) findViewById(R.id.image4);
}
public void isSelect(int position){
FragmentManager fragmentManager=getSupportFragmentManager();
FragmentTransaction fragmentTransaction=fragmentManager.beginTransaction();
hideFragment(fragmentTransaction);
switch (position) {
case 0:
if (fragment1 == null) {
fragment1 = new Fragment1();
fragmentTransaction.add(R.id.page1, fragment1);
} else {
fragmentTransaction.show(fragment1);
}
break;
case 1:
if (fragment2 == null) {
fragment2 = new Fragment2();
fragmentTransaction.add(R.id.page1, fragment2);
} else {
fragmentTransaction.show(fragment2);
}
break;
case 2:
if (fragment3 == null) {
fragment3 = new Fragment3();
fragmentTransaction.add(R.id.page1, fragment3);
} else {
fragmentTransaction.show(fragment3);
}
break;
case 3:
if (fragment4 == null) {
fragment4 = new Fragment4();
fragmentTransaction.add(R.id.page1, fragment4);
} else {
fragmentTransaction.show(fragment4);
}
break;
}
fragmentTransaction.commit();
}
public void hideFragment(FragmentTransaction fragmentTransaction){
if (fragment1!=null)
{
fragmentTransaction.hide(fragment1);
}
if (fragment2!=null)
{
fragmentTransaction.hide(fragment2);
}
if (fragment3!=null)
{
fragmentTransaction.hide(fragment3);
}
if (fragment4!=null)
{
fragmentTransaction.hide(fragment4);
}
}
@Override
public void onClick(View v) {
ImageIdChange();
switch (v.getId())
{
case R.id.tab1:
isSelect(0);
img1.setImageResource(R.drawable.tab_weixin_pressed);
break;
case R.id.tab2:
isSelect(1);
img2.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.tab3:
isSelect(2);
img3.setImageResource(R.drawable.tab_address_pressed);
break;
case R.id.tab4:
isSelect(3);
img4.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
public void ImageIdChange(){
img1.setImageResource(R.drawable.tab_weixin_normal);
img2.setImageResource(R.drawable.tab_find_frd_normal);
img3.setImageResource(R.drawable.tab_address_normal);
img4.setImageResource(R.drawable.tab_settings_normal);
}
}
其布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
<include layout="@layout/top"></include>
<LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:id="@+id/page1"></LinearLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
fragment1.java
其他3个fragment都差不多,
return inflater.inflate(R.layout.tab_1,null);改一下布局R.layout.tab_1即可
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 cn.oddcloud.www.startoveragain7.R;
/** * Created by Administrator on 2016/5/5. */
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_1,null);
}
}
fragment1的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="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab_1" android:text="this is a 首页" android:gravity="center" android:textSize="23sp" />
</LinearLayout>
底部导航文件xml
<?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:background="@drawable/bottom_bar9" android:layout_height="wrap_content" android:gravity="center">
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:id="@+id/tab1" android:orientation="vertical">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:id="@+id/image1" android:src="@drawable/tab_weixin_pressed"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="首页" android:id="@+id/text1" android:layout_gravity="center" android:textColor="#fff" />
</LinearLayout>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" android:id="@+id/tab2">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:id="@+id/image2" android:src="@drawable/tab_find_frd_normal"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:id="@+id/text2" android:layout_gravity="center" android:textColor="#fff"></TextView>
</LinearLayout>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" android:id="@+id/tab3">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image3" android:layout_gravity="center" android:src="@drawable/tab_find_frd_normal"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="地址" android:layout_gravity="center" android:id="@+id/text3" android:textColor="#fff"></TextView>
</LinearLayout>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" android:id="@+id/tab4">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/image4" android:layout_gravity="center" android:src="@drawable/tab_settings_normal"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:layout_gravity="center" android:id="@+id/text4" android:textColor="#fff"></TextView>
</LinearLayout>
</LinearLayout>
顶部的xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:background="@drawable/title_bar9" android:layout_height="wrap_content" android:gravity="center_vertical" >
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="微信" android:gravity="center" android:layout_gravity="center_vertical" android:textSize="32sp" android:textColor="#fff" />
</LinearLayout>