Android仿QQ空间底栏

最新推荐文章于 2021-05-26 11:10:10 发布
最新推荐文章于 2021-05-26 11:10:10 发布
阅读量1.6k 收藏 5
点赞数
分类专栏： UI源码 文章标签： QQ空间 android 高仿
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenleicpp/article/details/9395839
版权
这篇博客介绍了如何在Android应用中创建一个与QQ空间类似的底部导航栏，通过源码下载和步骤解析，详细展示了实现这一高仿效果的过程。
摘要由CSDN通过智能技术生成

继上一篇仿新浪微博底栏，我们在写个仿QQ空间底栏的效果。


先看主布局文件：

<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" >

    <FrameLayout
        android:id="@+id/frame_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/frameLayout1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#ffffff" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@drawable/qz_bg_toolbar_new" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginTop="1dp"
            android:gravity="center_horizontal" >

            <FrameLayout
                android:id="@+id/layout_friendfeed"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1"
            	android:background="@drawable/home_btn_bg">

                <ImageView
                    android:id="@+id/image_friendfeed"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:background="@drawable/tab_btn_friendfeed"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="动态"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>

            <FrameLayout
                android:id="@+id/layout_myfeed"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1"
            	android:background="@drawable/home_btn_bg">

                <ImageView
                    android:id="@+id/image_myfeed"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:background="@drawable/tab_btn_myfeed"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="与我想关"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1" >
            </FrameLayout>

            <FrameLayout
                android:id="@+id/layout_home"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1"
            	android:background="@drawable/home_btn_bg">

                <ImageView
                    android:id="@+id/image_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:background="@drawable/tab_btn_home"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="我的空间"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>

            <FrameLayout
                android:id="@+id/layout_more"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_weight="1" 
            	android:background="@drawable/home_btn_bg">

                <ImageView
                    android:id="@+id/image_more"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|center"
                    android:layout_marginTop="1.0dip"
                    android:background="@drawable/tab_btn_more"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="6.0dip"
                    android:text="更多"
                    android:textColor="#ffffff"
                    android:textSize="10sp" />
            </FrameLayout>
        </LinearLayout>
    </FrameLayout>

    <ImageView
        android:id="@+id/toggle_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/qz_bg_toolbar_btn_normal" />

    <ImageView
        android:id="@+id/plus_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/frameLayout1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="6dip"
        android:src="@drawable/qz_icon_toolbar_plus" />

</RelativeLayout>
主MainActivity的代码： 

package cn.cl.qzonedemo;

import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.PopupWindow.OnDismissListener;

public class MainActivity extends FragmentActivity implements OnClickListener {

	private Main1Fragment page1;
	private Main2Fragment page2;
	private Main3Fragment page3;
	private Main4Fragment page4;
	private FrameLayout fl_friendfeed;
	private FrameLayout fl_myfeed;
	private FrameLayout fl_home;
	private FrameLayout fl_more;
	private ImageView iv_friendfeed;
	private ImageView iv_myfeed;
	private ImageView iv_home;
	private ImageView iv_more;
	private ImageView iv_toggle;
	private ImageView iv_plus;
	private PopupWindow popWindow;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		setupView();
		clickFriendFeedFl();
	}

	private void setupView() {
		fl_friendfeed = (FrameLayout) findViewById(R.id.layout_friendfeed);
		fl_myfeed = (FrameLayout) findViewById(R.id.layout_myfeed);
		fl_home = (FrameLayout) findViewById(R.id.layout_home);
		fl_more = (FrameLayout) findViewById(R.id.layout_more);
		iv_friendfeed = (ImageView) findViewById(R.id.image_friendfeed);
		iv_myfeed = (ImageView) findViewById(R.id.image_myfeed);
		iv_home = (ImageView) findViewById(R.id.image_home);
		iv_more = (ImageView) findViewById(R.id.image_more);
		fl_friendfeed.setOnClickListener(this);
		fl_myfeed.setOnClickListener(this);
		fl_home.setOnClickListener(this);
		fl_more.setOnClickListener(this);
		iv_toggle = (ImageView) findViewById(R.id.toggle_btn);
		iv_toggle.setOnClickListener(this);
		iv_plus = (ImageView) findViewById(R.id.plus_btn);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.layout_friendfeed:
			clickFriendFeedFl();
			break;
		case R.id.layout_myfeed:
			clickMyFeedFl();
			break;
		case R.id.layout_home:
			clickHomeFl();
			break;
		case R.id.layout_more:
			clickMoreFl();
			break;
		case R.id.toggle_btn:
			clickPlusBtn();
			break;
		default:
			break;
		}
	}

	private void clickFriendFeedFl() {
		page1 = new Main1Fragment();
		FragmentTransaction fragmentTransaction = this
				.getSupportFragmentManager().beginTransaction();
		fragmentTransaction.replace(R.id.frame_content, page1);
		fragmentTransaction.commit();
		fl_friendfeed.setSelected(true);
		iv_friendfeed.setSelected(true);
		fl_myfeed.setSelected(false);
		iv_myfeed.setSelected(false);
		fl_home.setSelected(false);
		iv_home.setSelected(false);
		fl_more.setSelected(false);
		iv_more.setSelected(false);
	}

	private void clickMyFeedFl() {
		page2 = new Main2Fragment();
		FragmentTransaction fragmentTransaction = this
				.getSupportFragmentManager().beginTransaction();
		fragmentTransaction.replace(R.id.frame_content, page2);
		fragmentTransaction.commit();
		fl_friendfeed.setSelected(false);
		iv_friendfeed.setSelected(false);
		fl_myfeed.setSelected(true);
		iv_myfeed.setSelected(true);
		fl_home.setSelected(false);
		iv_home.setSelected(false);
		fl_more.setSelected(false);
		iv_more.setSelected(false);
	}

	private void clickHomeFl() {
		page3 = new Main3Fragment();
		FragmentTransaction fragmentTransaction = this
				.getSupportFragmentManager().beginTransaction();
		fragmentTransaction.replace(R.id.frame_content, page3);
		fragmentTransaction.commit();
		fl_friendfeed.setSelected(false);
		iv_friendfeed.setSelected(false);
		fl_myfeed.setSelected(false);
		iv_myfeed.setSelected(false);
		fl_home.setSelected(true);
		iv_home.setSelected(true);
		fl_more.setSelected(false);
		iv_more.setSelected(false);
	}

	private void clickMoreFl() {
		page4 = new Main4Fragment();
		FragmentTransaction fragmentTransaction = this
				.getSupportFragmentManager().beginTransaction();
		fragmentTransaction.replace(R.id.frame_content, page4);
		fragmentTransaction.commit();
		fl_friendfeed.setSelected(false);
		iv_friendfeed.setSelected(false);
		fl_myfeed.setSelected(false);
		iv_myfeed.setSelected(false);
		fl_home.setSelected(false);
		iv_home.setSelected(false);
		fl_more.setSelected(true);
		iv_more.setSelected(true);
	}

	private void clickPlusBtn() {
		showPopupWindow(iv_toggle);
		iv_toggle.setImageResource(R.drawable.qz_bg_skin_toolbar_btn_pressed);
		iv_plus.setImageResource(R.drawable.qz_icon_toolbar_plusback);
	}

	private void restorePlusBtn() {
		iv_toggle.setImageResource(R.drawable.qz_bg_toolbar_btn_normal);
		iv_plus.setImageResource(R.drawable.qz_icon_toolbar_plus);
	}

	@SuppressWarnings("deprecation")
	private void showPopupWindow(View parent) {
		if (popWindow == null) {
			LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			View view = layoutInflater.inflate(R.layout.write_tab, null);
			popWindow = new PopupWindow(view,
			LinearLayout.LayoutParams.MATCH_PARENT, 320);
		}
		popWindow.setFocusable(true);
		popWindow.setOutsideTouchable(true);
		popWindow.setBackgroundDrawable(new BitmapDrawable());
		popWindow.showAsDropDown(parent, Gravity.CENTER, 0);
		popWindow.setOnDismissListener(new OnDismissListener() {              
            @Override  
            public void onDismiss() {  
                restorePlusBtn();               
            }  
        }); 
	}

}
至此为止，主要代码就写完了，具体的请看demo源码：


源码下载



chenleicpp
关注
专栏目录
Android精仿淘宝/QQ空间标题栏渐变效果
小嵩的博客
01-18 6095
最近在淘宝上囤年货买买买的时候，注意到淘宝购物详情页的渐变效果，觉得效果还是挺不错的，有种似曾相识的感觉，没错，好像QQ空间的标题栏也是类似的做法。鉴于这种效果在平时可能会用得比较多，所以就自己研究了一下然后把它实现出来了，项目完整demo在文章底部有链接，大家可下载参考研究。文章原创，转载请注明地址：小嵩的CSDN博客，地址：http://blog.csdn.net/qq_22393017本文会详
Android仿QQ空间主页面的实现
01-05
今天模仿安卓QQ空间，效果如下：    打开程序的启动画面和导航页面我就不做了，大家可以模仿微信的那个做一下，很简单。这次主要做一下主页面的实现，下面是主页面的布局： 代码如下: <?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:background=”@andro
【Android开发】【布局】 仿QQ的UI
weixin_30949361的博客
12-27 108
Demo地址 转载于:https://www.cnblogs.com/neo-java/p/10185062.html
android仿qq布局,Android自定义布局实现仿qq侧滑部分代码
weixin_35947010的博客
05-26 209
自定义布局实现仿qq侧滑部分android代码，供大家参考，具体内容如下实现说明：通过自定义布局实现：slidinglayout继承于 horizontalscrollview/*** created by administrator on 2017/3/29.*/public class slidinglayout extends horizontalscrollview{/** 左侧右边间距 ...
Android 仿QQ首页的消息和电话的切换，首页的头部(完全用布局控制)
08-20
Android 仿QQ首页的消息和电话的切换，首页的头部(完全用布局控制)
android 仿QQ登录 布局源码
10-31
android 仿QQ登录 布局源码
Android中仿QQ空间效果标题栏颜色渐变
08-12
本文将深入探讨如何在Android中实现类似QQ空间那样动态变化的标题栏颜色渐变效果，同时会涉及到在ScrollView和ListView两种不同UI场景下的应用。 首先，我们要明白QQ空间标题栏颜色渐变效果通常是通过滑动屏幕时...
Android仿QQ空间底部菜单示例代码
09-05
【Android仿QQ空间底部菜单示例代码】是一个关于在Android平台上实现类似QQ空间底部导航栏功能的编程示例。此示例旨在修复已有的Demo中存在的问题，并提供一个更清晰、可读性更强的实现方式。底部菜单是许多移动应用...
Android仿QQ空间界面源代码
10-15
本文将深入解析“Android仿QQ空间界面源代码”这一主题，主要关注如何实现微信底部带数目显示菜单的功能。 首先，我们来看“微信底部带数目显示菜单”的设计。这种设计通常指的是在应用程序底部有一个固定的导航栏...
Android 仿QQ界面 适合新手学习
12-26
仿QQ界面布局 ，广播监听网络状态无网络时的提示 二维码扫描 水印相机 供学习参考
Android实现毛玻璃效果
qq_34542930的博客
05-26 291
1.工具类 public class FastBlur { public static Bitmap doBlur(Bitmap sentBitmap, int radius, boolean canReuseInBitmap) { // Stack Blur v1.0 from // http://www.quasimondo.com/Stack
Android 仿QQ侧边栏，自定义view的学习 <Garry进阶(三)>
GarryLin的专栏
12-12 4582
这是一篇详细介绍如何自己编写侧边栏的一篇博文，涉及到的知识点有：HorizontalScrollView，自定义控件，大多为自我记录，当然，分享也是最重要的
android ui
ku1989的专栏
05-08 151
转自：http://www.eoeandroid.com/forum.php?mod=viewthread&amp;tid=103147&amp;page=1&amp;extra=#pid1075488 最近，有点空闲的时间就拿QQ登录界面来模仿练手，做了个简单的登录界面。界面一般般吧，不算很漂亮，现在拿出来分享，希望大家一起学习与进步。有什么不足之处，请各位大侠多多赐教，谢谢。这个界面涉及到L...
QQ上的tabhost效果
jykenan的专栏
03-28 97
import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.view.animatio...
Android应用经典主界面框架之一:仿QQ (使用Fragment, 附源码)
热门推荐
yanzi1225627的专栏
06-14 11万+
最近反复研究日常经典必用的几个android app，从主界面带来的交互方式入手
android仿qq顶部消息栏
cf8833的博客
04-10 1343
android仿照qq的顶部栏效果，主要就是利用fragment manager把fragment设置显示内容（1）在activity_main.xml布局中添加控件&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/and...
QQ使用的是ViewPager
....
12-24 821
分类： Android开发2012-10-28 00:14 3601人阅读 评论(5) 收藏 举报 目录(?)[+] Android版的QQ使用的是ViewPager实现的，主要是可以实现TabHost的界面，但功能比Tabhost更好，因为可以实现用手滑动实现界面的切换。QQ的截图如下 ：
Android--仿QQ空间动态页(继续拖动查看详情)及标题栏渐变
diy_coder
09-26 5699
最近一直比较忙，也没抽出时间来写博客，人一懒就说明都不想做了。 博客如果不能坚持的话，那就没什么意义了，也就废了，最近研究了一下QQ空间动态页面，自己也试着写了一个，现在拿出来分享给大家，好了，废话不多说，切入正题，先看看我们今天要实现功能的效果图： 来看下我们今天要介绍的主角 PullToZoomInListView github地址如下：https://github.com/matr
Android仿QQ空间主页面布局及实现教程
实现Android仿QQ空间的主页面是一个涉及多个方面的任务，包括布局设计、UI组件的选择和配置、交互逻辑以及与后台数据的同步。通过深入理解和使用Android框架，结合实际的设计规范和用户体验，开发者能够创建出具有...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值