使用Fragment实现顶部菜单栏

最新推荐文章于 2023-07-25 15:25:19 发布

tan313

最新推荐文章于 2023-07-25 15:25:19 发布

阅读量2.1k

点赞数

分类专栏： Android笔记

本文链接：https://blog.csdn.net/tan313/article/details/44277053

版权

Android笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

之前使用ViewPager+ActivityGroup实现过顶部菜单栏切换,参照http://blog.csdn.net/tan313/article/details/4174501，今天使用Fragment实现顶部菜单栏。ViewPager类似一个View容器，他可以将View的数组添加进去。Fragment这个控件是依附activity存在的，

1.继承Fragment,重写onCreateView决定Fragment的布局

2.在activity中声明此Fragment,就当和普通的View一样

使用示例如下:

首先开始编写三个Fragment布局文件,简单的布局:

第一个chatfragment.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        
         <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="100dp"
        android:background="#ffffff"
        android:gravity="center"
        android:orientation="vertical" >

        <Button 
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="聊天,点击我"
        android:id="@+id/chatbtn"
        />

    	</LinearLayout>
        
    </RelativeLayout>

</LinearLayout>

2.第二个foundfragment文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        
         <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="100dp"
        android:background="#ffffff"
        android:gravity="center"
        android:orientation="vertical" >

        <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="发现,点击我"
        android:id="@+id/foundbtn"
        />

    	</LinearLayout>
        
    </RelativeLayout>

</LinearLayout>

3.第三个contactfragment.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        
        <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="100dp"
        android:background="#ffffff"
        android:gravity="center"
        android:orientation="vertical" >

        <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="通讯录,点击我"
        android:id="@+id/contactbtn"
        />

    	</LinearLayout>
        
    </RelativeLayout>

</LinearLayout>

上面三个布局只是简单的往界面添加一个按钮。

主布局文件activity_main.xml文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    
    <RelativeLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:id="@+id/title"
            android:orientation="horizontal"
            >
            <LinearLayout 
                android:id="@+id/chat_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:gravity="center"
                >
                <TextView
                android:id="@+id/chatText"
                android:text="聊天"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:textSize="20sp"
                 />
            </LinearLayout>
            
            <LinearLayout 
                android:id="@+id/found_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:gravity="center"
                >
                <TextView
                android:id="@+id/foundText"
                android:text="发现"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:textSize="20sp"
                 />
            </LinearLayout>
            <LinearLayout 
                android:id="@+id/contact_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:gravity="center"
                >
               <TextView
                android:id="@+id/contactText"
                android:text="通讯录"
                android:gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:textSize="20sp"
                 /> 
            </LinearLayout>
 
        </LinearLayout>
        <FrameLayout 
            android:id="@+id/content"
            android:layout_below="@id/title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            
        </FrameLayout>
    </RelativeLayout> 

</RelativeLayout>

在主布局文件中，书写了顶部菜单栏标题。

接下来实现继承Fragment的java文件:

第一个ChatFragment.java文件:

package com.example.chattdwdemo;

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


public class ChatFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.chatfragment, container, false);
		Button button = (Button) view.findViewById(R.id.chatbtn);
		button.setOnClickListener(new OnClickListener());
		return view;
	}
	
	private final class OnClickListener implements android.view.View.OnClickListener{

		@Override
		public void onClick(View v) {
			Toast.makeText(getActivity(), "聊天", Toast.LENGTH_SHORT).show();
		}
		
	}
}

第二个FoundFragment.java文件:

package com.example.chattdwdemo;

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


public class FoundFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.foundfragment, container, false);
		Button button = (Button) view.findViewById(R.id.foundbtn);
		button.setOnClickListener(new OnClickListener());
		return view;
	}
	
	private final class OnClickListener implements android.view.View.OnClickListener{

		@Override
		public void onClick(View v) {
			Toast.makeText(getActivity(), "发现", Toast.LENGTH_SHORT).show();
		}
		
	}
}

第三个ContactsFragment文件:

package com.example.chattdwdemo;

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


public class ContactsFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.contactfragment, container, false);
		Button button = (Button) view.findViewById(R.id.contactbtn);
		button.setOnClickListener(new OnClickListener());
		return view;
	}
	
	private final class OnClickListener implements android.view.View.OnClickListener{

		@Override
		public void onClick(View v) {
			Toast.makeText(getActivity(), "通讯录", Toast.LENGTH_SHORT).show();
		}
		
	}
}

这三个文件类似，通过重写onCreateView方法加载布局文件。

接下来是核心的主activity

package com.example.chattdwdemo;

import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.TextView;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends Activity implements OnClickListener{

	private ChatFragment chatFragment;
	private FoundFragment foundFragment;
	private ContactsFragment contactsFragment;
	
	private View chatView;
	private View foundView;
	private View contactView;
	
	private TextView chatText;
	private TextView foundText;
	private TextView contactText;
	
	private FragmentManager manager;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		manager = getFragmentManager();
		
		InitFragments();
		
		InitView();
		setTabSelection(0);
	}

	private void InitView() {
		chatView = findViewById(R.id.chat_layout);
		foundView = findViewById(R.id.found_layout);
		contactView = findViewById(R.id.contact_layout);
		
		chatText = (TextView) findViewById(R.id.chatText);
		foundText = (TextView) findViewById(R.id.foundText);
		contactText = (TextView) findViewById(R.id.contactText);
		
		chatView.setOnClickListener(this);
		foundView.setOnClickListener(this);
		contactView.setOnClickListener(this);
	}

	private void InitFragments() {
		FragmentTransaction ft = manager.beginTransaction();
		
		chatFragment = new ChatFragment();
		ft.add(R.id.content,chatFragment);
		
		foundFragment = new FoundFragment();
		ft.add(R.id.content, foundFragment);
		
		contactsFragment = new ContactsFragment();
		ft.add(R.id.content, contactsFragment);
		
		ft.commit();
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.chat_layout:
			setTabSelection(0);
			break;
		case R.id.found_layout:
			setTabSelection(1);
			break;
		case R.id.contact_layout:
			setTabSelection(2);
			break;
		}
	}

	private void setTabSelection(int index) {
		clearSelection();
		FragmentTransaction transaction = manager.beginTransaction();
		hideFragments(transaction);
		switch (index) {
		case 0:
			chatText.setTextColor(Color.BLACK);
			chatView.setBackgroundResource(R.drawable.btn_down);
			if(chatFragment == null){
				chatFragment = new ChatFragment();
				transaction.add(R.id.content, chatFragment);
			}else{
				transaction.show(chatFragment);
			}
			break;
		case 1:
			foundText.setTextColor(Color.BLACK);
			foundView.setBackgroundResource(R.drawable.btn_down);
			if(foundFragment == null){
				foundFragment = new FoundFragment();
				transaction.add(R.id.content, foundFragment);
			}else{
				transaction.show(foundFragment);
			}
			break;
		case 2:
			contactText.setTextColor(Color.BLACK);
			contactView.setBackgroundResource(R.drawable.btn_down);
			if(contactsFragment == null){
				contactsFragment = new ContactsFragment();
				transaction.add(R.id.content, contactsFragment);
			}else{
				transaction.show(contactsFragment);
			}
			break;
		}
		transaction.commit();
	}

	private void clearSelection() {
		chatView.setBackgroundDrawable(null);
		foundView.setBackgroundDrawable(null);
		contactView.setBackgroundDrawable(null);
		
		chatText.setTextColor(Color.BLACK);
		foundText.setTextColor(Color.BLACK);
		contactText.setTextColor(Color.BLACK);
	}

	private void hideFragments(FragmentTransaction transaction) {
		if(chatFragment != null){
			transaction.hide(chatFragment);
		}
		if(foundFragment != null){
			transaction.hide(foundFragment);
		}
		if(contactsFragment != null){
			transaction.hide(contactsFragment);
		}
	}
}

Fragment是通过事务进行处理的，首先必须getFragmentManager()方法得到FragmentManager,通过他开始一个事务

FragmentManager manager = getFragmentManager();

FragmentTransaction ft = manager.beginTransaction();

chatFragment = new ChatFragment();
ft.add(R.id.content,chatFragment);

foundFragment = new FoundFragment();
ft.add(R.id.content, foundFragment);

contactsFragment = new ContactsFragment();
ft.add(R.id.content, contactsFragment);

将各个Fragment界面添加到一个activity中。

ft.commit();

事务进行提交后后。即添加上去了。

代码下载:http://download.csdn.net/detail/tan313/8502797

tan313

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用Fragment实现顶部菜单栏

之前使用ViewPager+ActivityGroup实现过顶部菜单栏切换,参照http://blog.csdn.net/tan313/article/details/4174501，今天使用Fragment实现顶部菜单栏。ViewPager类似一个View容器，他可以将View的数组添加进去。Fragment这个控件是依附activity存在的，1.继承Fragment,重写onCreate
复制链接

扫一扫

专栏目录