用Fragment实现类似微信效果

一：实现类似微信效果点击手机底部的标签时切换相对应的内容界面。实现效果图：

二：代码结构：

三：实现

思路：

1、需要为每个标签设置相对应的fragment界面编写相应的逻辑代码

2、点击标签时切花相对应的fragment界面

代码：

MainActivity.java

package com.example.fragmentchange;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RadioButton;

import com.fragment.GiftFragment;
import com.fragment.OrderFragment;
import com.fragment.ShareFragment;
import com.fragment.ShopRankFragment;

public class MainActivity extends Activity implements OnClickListener{

	private FragmentManager manager;
	private FragmentTransaction transaction;
	private RadioButton rb_shoprank,rb_share,rb_gift,rb_order;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.fragment_main);
		
		manager=getFragmentManager();
		transaction=manager.beginTransaction();
		transaction.add(R.id.content_layout, new ShopRankFragment());
		transaction.commit();
		initView();
	}
	
	//初始化view视图
	public void initView(){
		rb_shoprank=(RadioButton) findViewById(R.id.rb_shoprank);
		rb_share=(RadioButton) findViewById(R.id.rb_shar);
		rb_gift=(RadioButton) findViewById(R.id.rb_gift);
		rb_order=(RadioButton) findViewById(R.id.rb_order);
		
		rb_shoprank.setOnClickListener(this);
		rb_share.setOnClickListener(this);
		rb_gift.setOnClickListener(this);
		rb_order.setOnClickListener(this);
	}

	/**
	 * 点击radioButton时触发的事件
	 */
	@Override
	public void onClick(View view) {
		transaction=manager.beginTransaction();
		switch (view.getId()) {
		case R.id.rb_shoprank:
			transaction.replace(R.id.content_layout, new ShopRankFragment());
			break;
		case R.id.rb_shar:
			transaction.replace(R.id.content_layout, new ShareFragment());
			break;
		case R.id.rb_gift:
			transaction.replace(R.id.content_layout, new GiftFragment());
			break;
		case R.id.rb_order:
			transaction.replace(R.id.content_layout, new OrderFragment());
			break;
		}
		transaction.commit();
	}

}

GiftFragment.java

package com.fragment;

import com.example.fragmentchange.R;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class GiftFragment extends Fragment {
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_gift, null);
	}

}

OrderFragment.java

package com.fragment;

import com.example.fragmentchange.R;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class OrderFragment extends Fragment {
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_order, null);
	}

}

ShareFragment.java

package com.fragment;

import com.example.fragmentchange.R;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ShareFragment extends Fragment {
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_share, null);
	}

}

ShopRankFragment.java

package com.fragment;


import com.example.fragmentchange.R;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ShopRankFragment extends Fragment {
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		return inflater.inflate(R.layout.fragment_shoprank, null);
	}

}

fragment_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- 展示内容界面 -->

    <LinearLayout
        android:id="@+id/content_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout_bottom"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        android:orientation="horizontal" >

        <RadioGroup
            android:id="@+id/rg_home"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/rb_shoprank"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:button="@null"
                android:drawablePadding="10dp"
                android:drawableTop="@drawable/home_item_top"
                android:gravity="center"
                android:text="@string/home_shop"
                android:textColor="#B3B3B3"
                android:textSize="15sp" />

            <RadioButton
                android:id="@+id/rb_shar"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:button="@null"
                android:drawablePadding="10dp"
                android:drawableTop="@drawable/home_item_top"
                android:gravity="center"
                android:text="@string/home_shair"
                android:textColor="#B3B3B3"
                android:textSize="15sp" />

            <RadioButton
                android:id="@+id/rb_gift"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:button="@null"
                android:drawablePadding="10dp"
                android:drawableTop="@drawable/home_item_top"
                android:gravity="center"
                android:text="@string/home_gift"
                android:textColor="#B3B3B3"
                android:textSize="15sp" />
            <RadioButton
                android:id="@+id/rb_order"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:button="@null"
                android:drawablePadding="10dp"
                android:drawableTop="@drawable/home_item_top"
                android:gravity="center"
                android:text="@string/home_order"
                android:textColor="#B3B3B3"
                android:textSize="15sp" />
        </RadioGroup>
    </LinearLayout>

</RelativeLayout>

fragment_gift.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <TextView 
        android:id="@+id/gift"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#aa0000"
        android:textSize="30sp"
        android:text="@string/home_gift"
        />

</RelativeLayout>

fragment_order.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <TextView 
        android:id="@+id/order"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#aa0000"
        android:textSize="30sp"
        android:text="@string/home_order"
        />

</RelativeLayout>

fragment_share.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <TextView 
        android:id="@+id/shair"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#aa0000"
        android:textSize="30sp"
        android:text="@string/home_shair"
        />

</RelativeLayout>

fragment_shoprank.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <TextView 
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="#aa0000"
        android:textSize="30sp"
        android:text="@string/home_shop"
        />

</RelativeLayout>

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">FragmentChange</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="home_shop">热销排行</string>
    <string name="home_shair">手机专享</string>
    <string name="home_gift">未来礼品</string>
    <string name="home_order">我的订单</string>

</resources>

home_item_top.png

用Fragment实现类似微信效果

猜你喜欢