Android 仿QQ主界面 Fragment + FrameLayout

这边就不介绍了Fragment产生原因，以及一些基本的用法和各种API，如果你还不熟悉的话，可以自行百度！这边直接上代码：

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/main_fl_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/tab_bg_line"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="@color/tab_bg"
android:orientation="horizontal">

<LinearLayout
android:id="@+id/ll_chats"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:orientation="vertical">

<com.calendar.views.GradientIconView
android:id="@+id/icon_calendar"
android:layout_width="40dp"
android:layout_height="35dp"
app:bottom_icon="@mipmap/table_calendar_false"
app:top_icon="@mipmap/table_calendar_true"/>

<com.calendar.views.GradientTextView
android:id="@+id/tv_calendar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:bottom_text_color="@color/tab_text_gray"
app:text="@string/calendar"
app:text_size="12sp"
app:top_text_color="@color/tab_bg_red"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_contracts"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:orientation="vertical">
<com.calendar.views.GradientIconView
android:id="@+id/icon_events"
android:layout_width="40dp"
android:layout_height="35dp"
app:bottom_icon="@mipmap/table_recently_false"
app:top_icon="@mipmap/table_recently_true"/>
<com.calendar.views.GradientTextView
android:id="@+id/tv_events"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:bottom_text_color="@color/tab_text_gray"
app:text="@string/events"
app:text_size="12sp"
app:top_text_color="@color/tab_bg_red"/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_aboutMe"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:orientation="vertical">
<com.calendar.views.GradientIconView
android:id="@+id/icon_aboutMe"
android:layout_width="40dp"
android:layout_height="35dp"
app:bottom_icon="@mipmap/table_owner_false"
app:top_icon="@mipmap/table_owner_true"/>
<com.calendar.views.GradientTextView
android:id="@+id/tv_aboutMe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:bottom_text_color="@color/tab_text_gray"
app:text="@string/me"
app:text_size="12sp"
app:top_text_color="@color/tab_bg_red"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

其中GradientIconView、GradientTextView是自定义的可渐变view，可以用来实现仿微信主界面效果，这边只是让透明度在0、1中切换：

/**
* 自定义可以改变颜色的textView
* 原理是：两张重叠textView根据viewpager滑动距离改变透明度，实现两张textView的切换
*/
public class GradientTextView extends FrameLayout {
//topTextView
private TextView mTopTextView;
//bottomTextView
private TextView mBottomTextView;
//保存GradientIconView实例当前状态
private static final String INSTANCE_STATE = "instance_state";
//保存透明度状态
private static final String STATE_ALPHA = "state_alpha";
//透明度
private float mAlpha = 0f;

public GradientTextView(Context context) {
this(context, null);
}

public GradientTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public GradientTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
//自定义属性，获取设置的图标
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.GradientTextView);
int color;
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
if (attr == R.styleable.GradientTextView_top_text_color) {
color = a.getColor(attr, Color.TRANSPARENT);
setTopTextColor(color);
} else if (attr == R.styleable.GradientTextView_bottom_text_color) {
color = a.getColor(attr, Color.BLACK);
setBottomTextColor(color);
} else if (attr == R.styleable.GradientTextView_text) {
String text = a.getString(attr);
setGradientText(text);
} else if (attr == R.styleable.GradientTextView_text_size) {
int size = a.getDimensionPixelSize(attr, (int) TypedValue
.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10,
getResources().getDisplayMetrics()));
setGradientTextSize(size);
}
}
a.recycle();
setTextViewAlpha(mAlpha);
}

/**
* 设置上层文本颜色
*
* @param color 颜色
*/
public void setTopTextColor(int color) {
mTopTextView.setTextColor(color);
}

/**
* 设置底层文本颜色
*
* @param color 颜色
*/
public void setBottomTextColor(int color) {
mBottomTextView.setTextColor(color);
}

/**
* 初始化视图
*/
private void initView(Context context) {
LayoutInflater.from(context).inflate(R.layout.gradient_textview_layout, this, true);
mTopTextView = (TextView) findViewById(R.id.tv_top);
mBottomTextView = (TextView) findViewById(R.id.tv_bottom);
}

/**
* 设置两层图片的透明度达到切换的效果
*
* @param alpha 透明度1~0；
*/
public void setTextViewAlpha(float alpha) {
mTopTextView.setAlpha(alpha);
mBottomTextView.setAlpha(1 - alpha);
this.mAlpha = alpha;
}

/**
* 设置文本
*
* @param text 文本
*/
public void setGradientText(String text) {
mTopTextView.setText(text);
mBottomTextView.setText(text);
}

/**
* 设置文字大小
*
* @param textSize int
*/
public void setGradientTextSize(int textSize) {
mTopTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
mBottomTextView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);
}

/**
* 非正常状态下退出该view时保存状态
*
* @return Parcelable
*/
@Override
protected Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
bundle.putParcelable(INSTANCE_STATE, super.onSaveInstanceState());
bundle.putFloat(STATE_ALPHA, mAlpha);
return bundle;
}

/**
* 恢复到非正常退出前的状态
*
* @param state state
*/
@Override
protected void onRestoreInstanceState(Parcelable state) {
if (state instanceof Bundle) {
Bundle bundle = (Bundle) state;
mAlpha = bundle.getFloat(STATE_ALPHA);
super.onRestoreInstanceState(bundle.getBundle(INSTANCE_STATE));
} else {
super.onRestoreInstanceState(state);
}
}
}

/**
* 自定义可以改变颜色的view
* 原理是：两张重叠图片根据viewpager滑动距离改变透明度，实现两张图片的切换
*/
public class GradientIconView extends FrameLayout {
//topIcon
private ImageView mTopIconView;
//bottomIcon
private ImageView mBottomIconView;
//保存GradientIconView实例当前状态
private static final String INSTANCE_STATE = "instance_state";
//保存透明度状态
private static final String STATE_ALPHA = "state_alpha";
//透明度
private float mAlpha = 0f;

public GradientIconView(Context context) {
this(context, null);
}

public GradientIconView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public GradientIconView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context);
//自定义属性，获取设置的图标
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.GradientIconView);
Drawable drawable;
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
if (attr == R.styleable.GradientIconView_top_icon) {
drawable = a.getDrawable(attr);
setTopIconView(drawable);
} else if (attr == R.styleable.GradientIconView_bottom_icon) {
drawable = a.getDrawable(attr);
setBottomIconView(drawable);
}
}
a.recycle();
setIconAlpha(mAlpha);
}

/**
* 初始化视图
*/
private void initView(Context context) {
LayoutInflater.from(context).inflate(R.layout.gradient_icon_layout, this, true);
mTopIconView = (ImageView) findViewById(R.id.top_icon_view);
mBottomIconView = (ImageView) findViewById(R.id.bottom_icon_view);
}

/**
* 设置两层图片的透明度达到切换的效果
*
* @param alpha 透明度1~0；
*/
public void setIconAlpha(float alpha) {
mTopIconView.setAlpha(alpha);
mBottomIconView.setAlpha(1 - alpha);
this.mAlpha = alpha;
}

/**
* 设置底层图标的背景图
*
* @param drawable 背景图
*/
@SuppressLint("NewApi")
public void setBottomIconView(Drawable drawable) {
mBottomIconView.setBackground(drawable);
}

/**
* 设置top图标的背景图
*
* @param drawable 背景图
*/
@SuppressLint("NewApi")
public void setTopIconView(Drawable drawable) {
mTopIconView.setBackground(drawable);
}

/**
* 非正常状态下退出该view时保存状态
*
* @return Parcelable
*/
@Override
protected Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
bundle.putParcelable(INSTANCE_STATE, super.onSaveInstanceState());
bundle.putFloat(STATE_ALPHA, mAlpha);
return bundle;
}

/**
* 恢复到非正常退出前的状态
*
* @param state state
*/
@Override
protected void onRestoreInstanceState(Parcelable state) {
if (state instanceof Bundle) {
Bundle bundle = (Bundle) state;
mAlpha = bundle.getFloat(STATE_ALPHA);
super.onRestoreInstanceState(bundle.getBundle(INSTANCE_STATE));
} else {
super.onRestoreInstanceState(state);
}
}
}

其中自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="top_icon" format="reference"/>
<attr name="bottom_icon" format="reference"/>
<declare-styleable name="GradientIconView">
<attr name="top_icon"/>
<attr name="bottom_icon"/>
</declare-styleable>

<attr name="text" format="string" />
<attr name="text_size" format="dimension" />
<attr name="top_text_color" format="color" />
<attr name="bottom_text_color" format="color" />

<declare-styleable name="GradientTextView">
<attr name="text" />
<attr name="text_size" />
<attr name="top_text_color" />
<attr name="bottom_text_color" />
</declare-styleable>

</resources>

然后定义三个Fragment：



如：

/**
* 关于我界面
*/
public class Fragment1 extends Fragment {
public static Fragment1 newInstance(String param1, String param2) {
Fragment1 fragment = new Fragment1();
return fragment;
}
public Fragment1() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_about_me, container, false);

return view;
}

@Override
public void onAttach(Context context) {
super.onAttach(context);
}
@Override
public void onDetach() {
super.onDetach();
}
}

接下来就是主界面了：

/**
* MainActivity
*/
public class MainActivity extends AppCompatActivity {
//Fragment列表
// private List<Fragment> mTabs = new ArrayList<>();
private Fragment1 mFragment1;
private Fragment2 mFragment2;
private Fragment3 mFragment3;
//切换图标列表
private List<GradientIconView> mIconViewList = new ArrayList<>();
private GradientIconView mChatIconView;
private GradientIconView mContactsIconView;
private GradientIconView mMeIconView;
//切换文本列表
private List<GradientTextView> mTextViewList = new ArrayList<>();
private GradientTextView mChatTextView;
private GradientTextView mContactsTextView;
private GradientTextView mMeTextView;
/**
* 用于对Fragment进行管理
*/
private FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
fragmentManager = getSupportFragmentManager();
setTabSelection(0);
}

/**
* 初始化视图
*/
private void initViews() {
//底部菜单栏
mChatIconView = (GradientIconView) findViewById(R.id.icon_calendar);
mChatIconView.setIconAlpha(1.0f);
mIconViewList.add(mChatIconView);

mContactsIconView = (GradientIconView) findViewById(R.id.icon_events);
mIconViewList.add(mContactsIconView);

mMeIconView = (GradientIconView) findViewById(R.id.icon_aboutMe);
mIconViewList.add(mMeIconView);

mChatTextView = (GradientTextView) findViewById(R.id.tv_calendar);
mChatTextView.setTextViewAlpha(1.0f);
mTextViewList.add(mChatTextView);
mContactsTextView = (GradientTextView) findViewById(R.id.tv_events);
mTextViewList.add(mContactsTextView);
mMeTextView = (GradientTextView) findViewById(R.id.tv_aboutMe);
mTextViewList.add(mMeTextView);
}

/**
* 添加视图点击事件监听
*
* @param view 视图
*/
public void onClick(View view) {
// resetOtherTabs();
switch (view.getId()) {
case R.id.ll_chats:
setTabSelection(0);
break;
case R.id.ll_contracts:
setTabSelection(1);
break;
case R.id.ll_aboutMe:
setTabSelection(2);
break;
}
}

/**
* 根据传入的index参数来设置选中的tab页。
*
* @param index 每个tab页对应的下标。0表示日历，1表示记事，2表示我
*/
private void setTabSelection(int index) {
//清除所有状态
resetOtherTabs();
//根据所选项设置状态
mIconViewList.get(index).setIconAlpha(1.0f);
mTextViewList.get(index).setTextViewAlpha(1.0f);
// 开启一个Fragment事务
FragmentTransaction transaction = fragmentManager.beginTransaction();
// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
hideFragments(transaction);
switch (index) {
case 0:
if (mFragment1 == null) {
// 如果MessageFragment为空，则创建一个并添加到界面上
mFragment1 = Fragment1.newInstance("", "");
transaction.add(R.id.main_fl_content, mFragment1);
} else {
// 如果MessageFragment不为空，则直接将它显示出来
transaction.show(mFragment1);
}
break;
case 1:
if (mFragment2 == null) {
// 如果ContactsFragment为空，则创建一个并添加到界面上
mFragment2 = Fragment2.newInstance("", "");
transaction.add(R.id.main_fl_content, mFragment2);
} else {
// 如果ContactsFragment不为空，则直接将它显示出来
transaction.show(mFragment2);
}
break;
case 2:
if (mFragment3 == null) {
// 如果NewsFragment为空，则创建一个并添加到界面上
mFragment3 = Fragment3.newInstance("", "");
transaction.add(R.id.main_fl_content, mFragment3);
} else {
// 如果NewsFragment不为空，则直接将它显示出来
transaction.show(mFragment3);
}
break;
}
transaction.commit();
}

/**
* 重置其他的Tab icon
*/
private void resetOtherTabIcons() {
for (int i = 0; i < mIconViewList.size(); i++) {
mIconViewList.get(i).setIconAlpha(0);
}
}

/**
* 重置其他的Tab text
*/
private void resetOtherTabText() {
for (int i = 0; i < mTextViewList.size(); i++) {
mTextViewList.get(i).setTextViewAlpha(0);
}
}

/**
* 重置其他的Tab
*/
private void resetOtherTabs() {
resetOtherTabIcons();
resetOtherTabText();
}

/**
* 将所有的Fragment都置为隐藏状态。
*
* @param transaction 用于对Fragment执行操作的事务
*/
private void hideFragments(FragmentTransaction transaction) {
if (mFragment1 != null) {
transaction.hide(mFragment1);
}
if (mFragment2 != null) {
transaction.hide(mFragment2);
}
if (mFragment3 != null) {
transaction.hide(mFragment3);
}
}

最后效果图：



防止fragment被非正常回收，重复创建产生重叠效果的：/**
* 当前activity显示的碎片，判断当前要显示的碎片对象是否为空，
* 防止碎片对象已存在，重复创建！
*
* @param fragment 当前activity显示的碎片
*/
@Override
public void onAttachFragment(Fragment fragment) {
super.onAttachFragment(fragment);
if (mFragment1 == null && fragment instanceof Fragment1) {
mFragment1 = (Fragment1) fragment;
} else if (mFragment2 == null && fragment instanceof Fragment2) {
mFragment2 = (Fragment2) fragment;
} else if (mFragment3 == null && fragment instanceof Fragment3) {
mFragment3 = (Fragment3) fragment;
}
}