仿微信主页fragment

最新推荐文章于 2021-06-08 21:14:30 发布

林为指

最新推荐文章于 2021-06-08 21:14:30 发布

阅读量672

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/linweizhi1/article/details/54945266

这篇博客分享了如何使用Fragment创建类似微信主页的布局。通过代码示例，展示了简单的页面设计，包括布局修改和图标、文字的设置，最终实现的效果与截图相符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理自己写过的代码，这个是一个最常见的fragment应用。现在大部分app的主页都zhem设计。那下面就贴上代码新手写的代码可能不规范的地方有点多，凑合看吧。

这个是我写的简易的样式demo的截图，

下面是代码

主页的布局这个是我后面改过文字的布局，文字和上面截图有点差别

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.fragmentdemo.MainActivity" >

    <com.example.fragmentdemo.NoScrollViewPager
        android:id="@+id/vp_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/rg_tab_menu"
        android:layout_alignParentTop="true" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dip"
        android:layout_above="@+id/rg_tab_menu"
        android:background="#cdcdcd" />

    <RadioGroup
        android:id="@+id/rg_tab_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#fff"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rb_tab_item_main"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:drawablePadding="2dp"
            android:gravity="center"
            android:paddingBottom="3dp"
            android:paddingTop="8dp"
            android:text="主页"
            android:textSize="12sp"
            tools:text="主页" />

        <RadioButton
            android:id="@+id/rb_tab_item_maid2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="2dp"
            android:gravity="center"
            android:paddingBottom="3dp"
            android:paddingTop="8dp"
            android:text="主页2"
            android:textSize="12sp" />

        <RadioButton
            android:id="@+id/rb_tab_item_maid3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="2dp"
            android:gravity="center"
            android:paddingBottom="3dp"
            android:paddingTop="8dp"
            android:text="主页3"
            android:textSize="12sp" />

        <RadioButton
            android:id="@+id/rb_tab_item_maid4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="2dp"
            android:gravity="center"
            android:paddingBottom="3dp"
            android:paddingTop="8dp"
            android:text="主页4"
            android:textSize="12sp" />

        <RadioButton
            android:id="@+id/rb_tab_item_maid5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="2dp"
            android:gravity="center"
            android:paddingBottom="3dp"
            android:paddingTop="8dp"
            android:text="主页5"
            android:textSize="12sp" />
    </RadioGroup>

</RelativeLayout>

这是主要的代码

package com.example.fragmentdemo;

import android.support.v4.app.FragmentPagerAdapter;
import android.support.v7.app.ActionBarActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.RadioGroup;

@SuppressLint("NewApi")
public class MainActivity extends ActionBarActivity {
	private RadioGroup radiogroup;
	private NoScrollViewPager viewpager;
	private FragmentPagerAdapter adapter;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		radiogroup = (RadioGroup) findViewById(R.id.rg_tab_menu);
		viewpager = (NoScrollViewPager) findViewById(R.id.vp_container);
		adapter = new InnerFragmentPagerAdapter(getSupportFragmentManager());
		viewpager.setAdapter(adapter);
		InnerOnCheckedChangeListener listener = new InnerOnCheckedChangeListener();
		radiogroup.setOnCheckedChangeListener(listener);
		viewpager.setOffscreenPageLimit(5);
	}

	public void onPageScrollStateChanged(int arg0) {
		// TODO Auto-generated method stub

	}

	public void onPageScrolled(int arg0, float arg1, int arg2) {
		// TODO Auto-generated method stub

	}

	public void onPageSelected(int position) {
		switch (position) {
		case 0:

			radiogroup.check(R.id.rb_tab_item_main);

			break;

		case 1:
			radiogroup.check(R.id.rb_tab_item_maid2);
			break;

		case 2:
			radiogroup.check(R.id.rb_tab_item_maid3);
			break;

		case 3:
			radiogroup.check(R.id.rb_tab_item_maid4);
			break;

		case 4:
			radiogroup.check(R.id.rb_tab_item_maid5);
			break;
		}
	}



	private class InnerOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener {

		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			switch (checkedId) {
			case R.id.rb_tab_item_main:
				viewpager.setCurrentItem(0);

				break;

			case R.id.rb_tab_item_maid2:
				viewpager.setCurrentItem(1);
				break;

			case R.id.rb_tab_item_maid3:
				viewpager.setCurrentItem(2);
				break;

			case R.id.rb_tab_item_maid4:
				viewpager.setCurrentItem(3);
				break;
			case R.id.rb_tab_item_maid5:
				viewpager.setCurrentItem(4);
				break;
			}
		}
	}
}

fragment的我都没怎么添加就是一个空白的创建在那里

package com.example.fragmentdemo;


import android.support.v4.app.Fragment;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;


public class Fragment2 extends Fragment implements View.OnClickListener{
	  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
	        View view=inflater.inflate(R.layout.activity_fragment2,null);
		return view;
	}


	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub


	}






}

下面是ViewPager的代码

package com.example.fragmentdemo;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class NoScrollViewPager extends ViewPager {

    private boolean noScroll = false;

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NoScrollViewPager(Context context) {
        super(context);
    }

    public void setNoScroll(boolean noScroll) {
        this.noScroll = noScroll;
    }

    @Override
    public void scrollTo(int x, int y) {
        super.scrollTo(x, y);
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        if (noScroll)
            return false;
        else
            return super.onTouchEvent(arg0);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        if (noScroll)
            return false;
        else
            return super.onInterceptTouchEvent(arg0);
    }

    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {
        super.setCurrentItem(item, smoothScroll);
    }

    @Override
    public void setCurrentItem(int item) {
        super.setCurrentItem(item);
    }

}

还有adapter

package com.example.fragmentdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class InnerFragmentPagerAdapter extends FragmentPagerAdapter {

	public InnerFragmentPagerAdapter(FragmentManager fm) {
		super(fm);
	}

	@Override
	public Fragment getItem(int position) {
		Fragment fragment = null;
		switch (position) {
		case 0:
			fragment = new Fragment1();
			break;

		case 1:
			fragment = new Fragment2();
			break;

		case 2:
			fragment = new Fragment3();
			break;

		case 3:
			fragment = new Fragment4();
			break;
		case 4:
			fragment = new Fragment5();
			break;
		}
		return fragment;
	}

	@Override
	public int getCount() {
		return 5;
	}

}

这样就差不多完成了，出来的效果就是上面我截图里面的样式。

还有设置图标和底部文字的代码我也都贴上

选中图片切换

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false" android:drawable="@mipmap/main"/>
    <item android:state_checked="true"  android:drawable="@mipmap/fangzi"/>
    <item android:state_selected="true"  android:drawable="@mipmap/fangzi"/>
    <item android:state_pressed="true"  android:drawable="@mipmap/fangzi"/>

</selector>

选中文字变色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/colorAccent"/>
<!-- not selected -->
<item android:state_checked="false" android:color="@color/grey1"/>
</selector>

关闭滑动切换加一句就好了

viewpager.setNoScroll(true);

还有就是点击按钮图片的大小，由于对radiobutton不是熟悉不懂怎么在布局里面自己改大小在网上找了个代码里面改的

//设航按钮的图片大小
RadioGroup rg_tab_menu = (RadioGroup) findViewById(R.id.rg_tab_menu);
RadioButton rb_tab_item_main = (RadioButton) findViewById(R.id.rb_tab_item_main);
RadioButton rb_tab_item_service = (RadioButton) findViewById(R.id.rb_tab_item_main1);
RadioButton rb_tab_item_maid = (RadioButton) findViewById(R.id.rb_tab_item_main3);
RadioButton rb_tab_item_enjoy = (RadioButton) findViewById(R.id.rb_tab_item_main4);
RadioButton rb_tab_item_myself = (RadioButton) findViewById(R.id.rb_tab_item_main5);
Drawable drawableWeiHui = getResources().getDrawable(R.drawable.fragmant_main);
//第一0是距左右边距离，第二0是距上下边距离，第三69长度,第四宽度
drawableWeiHui.setBounds(0, 0, 60, 60);
rb_tab_item_main.setCompoundDrawables(null, drawableWeiHui, null, null);

Drawable drawableWeiHui2 = getResources().getDrawable(R.drawable.fragmant_serve);
drawableWeiHui2.setBounds(0, 0, 60, 60);
rb_tab_item_service.setCompoundDrawables(null, drawableWeiHui2, null, null);

Drawable drawableWeiHui3 = getResources().getDrawable(R.drawable.fragmant_steward);
drawableWeiHui3.setBounds(0, 0, 60, 60);
rb_tab_item_maid.setCompoundDrawables(null, drawableWeiHui3, null, null);

Drawable drawableWeiHui4 = getResources().getDrawable(R.drawable.fragmant_news);
drawableWeiHui4.setBounds(0, 0, 60, 60);
rb_tab_item_enjoy.setCompoundDrawables(null, drawableWeiHui4, null, null);

Drawable drawableWeiHui5 = getResources().getDrawable(R.drawable.fragmant_amend);
drawableWeiHui5.setBounds(0, 0, 60, 60);
rb_tab_item_myself.setCompoundDrawables(null, drawableWeiHui5, null, null);

到这里代码就都贴完了附一张完成的效果图