Android总结笔记03：QQ空间底部+网易新闻顶部UI

于 2013-07-23 23:50:51 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： Android进阶篇 文章标签： qq空间底部 网易新闻顶部划动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/android0012345/article/details/9429985
版权

手机QQ空间底部中间有一个突出，原来想着很复杂，可是通过反编译QQ空间看其布局，发现其实不是那么的复杂。索性自己就仿一个。废话不多说，直接上图，有图有真相(由于截图太大，我没有按比例缩小，所以有一些变形，请见谅)。

       

    


一、下面说一下实现思路：

1、这里我采用的是TabActivity来控制各个tab页的，当然TabActivity android不推荐使用了，可以用FragMent来代替。感兴趣的可以试一下。由于中间有一个突出的圆形，这里采用FrameLayout布局，很容易实现。

2、每个tab按钮是用RadionButton来实现的。由于RadionButton的按下选中事件默认自带，用它对我们这里好实现，当然你可以用别的组件或自定义组件来实现。

3、为了更好的适配不同时的分辨率，每一个tab按钮采用图片和文字单分开布局的方式，如：主页和上面的房子是分开截图的(由于原来让美工截的图是一张，导致适配比较麻烦，所以这里采用分开截图)。

二、下面看一上具体实现代码：

1、包结构：

二、程序的入口布局(activity_main.xml)及类MainActivity：

1、activity_man.xml布局：

（1）、效果图

（2）、acitivity_main.xml文件：

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


    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >


        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </FrameLayout>


        <RadioGroup
            android:id="@+id/main_radio"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/toolbar_bg"
            android:orientation="horizontal" >


            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1.0" >


                <RadioButton
                    android:id="@+id/rb1"
                    style="@style/radtionbutton_style"
                    android:checked="true"
                    android:drawableTop="@drawable/home_btn_bg_selector"
                    android:text="主页" />
            </FrameLayout>


            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1.0" >


                <RadioButton
                    android:id="@+id/rb2"
                    style="@style/radtionbutton_style"
                    android:drawableTop="@drawable/market_btn_bg_selector"
                    android:text="与我相关" />
            </FrameLayout>


            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1.0" >
            </FrameLayout>


            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1.0" >


                <RadioButton
                    android:id="@+id/rb3"
                    style="@style/radtionbutton_style"
                    android:drawableTop="@drawable/mime_btn_bg_selector"
                    android:text="我的空间" />


                <TextView
                    android:id="@+id/tv_comment"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginRight="3dip"
                    android:layout_marginTop="3dip"
                    android:background="@drawable/tab_unread_bg"
                    android:gravity="center"
                    android:text="1"
                    android:textSize="8sp" />
            </FrameLayout>


            <FrameLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1.0" >


                <RadioButton
                    android:id="@+id/rb4"
                    style="@style/radtionbutton_style"
                    android:drawableTop="@drawable/more_btn_bg_selector"
                    android:text="更多" />
            </FrameLayout>
        </RadioGroup>
        <!-- 把默认的选项卡隐藏掉，自己用RadioButton定义选项卡 -->


        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="bottom"
            android:visibility="gone" >
        </TabWidget>
    </TabHost>
<!-- 中间突出的图片 -->
    <FrameLayout
        android:id="@+id/btn_ck"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:background="@drawable/toolbar_write_bg" >


        <RadioButton
            android:id="@+id/rb5"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/toolbar_plus"
            android:button="@null"
            android:gravity="center" />
    </FrameLayout>
    
<!-- 移动图片的布局 -->
    <FrameLayout
        android:id="@+id/btn_ck"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left" >


        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/tab_front_bg" />
    </FrameLayout>

</FrameLayout>


 
 
其中RadionButton中的 
style="@style/radtionbutton_style"、和 
android:drawableTop="@drawable/home_btn_bg_selector"分别是RadionButton的样式和tab按钮中图片的选择器，就是当选中当前tab按钮的时候，图片变成黄色，文字变成白色的这样一个效果： 

（3）、radtionbutton_style
 

 

<resources>
    <!-- 定义radtionButton的样式 -->
   <style name="radtionbutton_style">
       <item name="android:layout_width">match_parent</item>
       <item name="android:layout_height">52dip</item>
       <item name="android:layout_gravity">center</item>
       <item name="android:background">@android:color/transparent</item>
       <item name="android:button">@null</item>
       <item name="android:gravity">center</item>
       <item name="android:paddingBottom">4dip</item>
       <item name="android:paddingTop">6dip</item>
       <item name="android:textColor">@color/color_radiobutton</item>
       <item name="android:textSize">12sp</item>
   </style>
</resources>
 
其中： 
<item name="android:textColor">@color/color_radiobutton</item>就是点击选中tab按钮以后。文字变化的选择器 

 

radionbutton.xml
 

 

<?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/color_text_selected"/>  
    <!-- not selected -->  
    <item android:color="@color/color_text_normal"/>  
</selector>
 

 

（4）、home_btn_bg_selector.xml
 

 

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

    <item android:drawable="@drawable/icon_1_n_pressed" android:state_checked="true"/>
    <!-- not selected -->
    <item android:drawable="@drawable/icon_1_n"/>

</selector>
 

 

 

2、入口类MainActivity：
 

 

package com.jun.qqzomeandwy;

import android.app.TabActivity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.KeyEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.TabHost;

import com.jun.qqzomeandwy.utils.AppManager;
import com.jun.qqzomeandwy.utils.CommUtils;
import com.jun.qqzomeandwy.utils.MoveBg;

/**
 * 程序的主入口
 * @author junjun
 *
 */

public class MainActivity extends TabActivity implements OnCheckedChangeListener{

	private TabHost tabHost = null ;
	private RadioButton rb1 = null ;
	private RadioButton rb2 = null ;
	private RadioButton rb3 = null ;
	private RadioButton rb4 = null ;
	private RadioButton rb5 = null ;
	private ImageView img;
	private int startLeft;//开始移动的位置
	private int imageWidth ;//移动图片的宽度
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		tabHost = this.getTabHost() ;
		buildTabSpec();  
		initRadios() ;
		AppManager.getAppManager().addActivity(this) ;
	}

	// 设置选项卡标签和要跳转的Activity
	private void buildTabSpec() {

		Intent intent1 = new Intent(this, TabActivity1.class);
		Intent intent2 = new Intent(this, TabActivity2.class);
		Intent intent3 = new Intent(this, TabActivity3.class);
		Intent intent4 = new Intent(this, TabActivity4.class);
		Intent intent5 = new Intent(this, TabActivity5.class);

		tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("首页")
				.setContent(intent1));
		tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("与我相关")
				.setContent(intent2));
		tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("我的平台")
				.setContent(intent3));
		tabHost.addTab(tabHost.newTabSpec("tab4").setIndicator("我的空间")
				.setContent(intent4));
		tabHost.addTab(tabHost.newTabSpec("tab5").setIndicator("更多")
				.setContent(intent5));
		WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);

		int width = wm.getDefaultDisplay().getWidth();//屏幕宽度
		imageWidth = width/5 ;
 		
		img = (ImageView) this.findViewById(R.id.iv) ;
		//由于imageview底部滚动条是在FrameLayout里面的，所以设置imageview的布局宽度就要用FrameLayout生在怕布局参数
		FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(imageWidth, ViewGroup.LayoutParams.WRAP_CONTENT);
		img.setLayoutParams(params) ;
	}

	// 初始化RadioButton并添加监听事件 
	private void initRadios() {
		rb1 = ((RadioButton) findViewById(R.id.rb1));
		rb2 = ((RadioButton) findViewById(R.id.rb2));
		rb3 = ((RadioButton) findViewById(R.id.rb3));
		rb4 = ((RadioButton) findViewById(R.id.rb4));
		rb5 = (RadioButton) findViewById(R.id.rb5);

		rb1.setOnCheckedChangeListener(this);
		rb2.setOnCheckedChangeListener(this);
		rb3.setOnCheckedChangeListener(this);
		rb4.setOnCheckedChangeListener(this);
		rb5.setOnCheckedChangeListener(this);
	}

	/**
	 * 当选项卡改变的时候调用的方法
	 */
	@Override
	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
		if (isChecked) {
			switch (buttonView.getId()) { // RadtioButton代替了原始的选项卡，那么原始的选项功能也就失去了，这里让RadionButton具有选项功能。
			case R.id.rb1: // 首页
				this.tabHost.setCurrentTabByTag("tab1");
				rb2.setChecked(false);
				rb3.setChecked(false);
				rb4.setChecked(false);
				rb5.setChecked(false);
				MoveBg.moveFrontBg(img, startLeft, 0, 0, 0);
				startLeft = 0;
				break;
			case R.id.rb2: // 大市场
				this.tabHost.setCurrentTabByTag("tab2");
				rb1.setChecked(false);
				rb3.setChecked(false);
				rb4.setChecked(false);
				rb5.setChecked(false);
				MoveBg.moveFrontBg(img, startLeft,imageWidth, 0, 0);
				startLeft = imageWidth;
				break;
			case R.id.rb5:
				this.tabHost.setCurrentTabByTag("tab3");
				rb1.setChecked(false);
				rb2.setChecked(false);
				rb3.setChecked(false);
				rb4.setChecked(false);
				MoveBg.moveFrontBg(img, startLeft, imageWidth * 2, 0, 0);
				startLeft = imageWidth * 2;

				break;
			case R.id.rb3: // 我的
				this.tabHost.setCurrentTabByTag("tab4");
				rb1.setChecked(false);
				rb2.setChecked(false);
				rb4.setChecked(false);
				rb5.setChecked(false);
				MoveBg.moveFrontBg(img, startLeft, imageWidth * 3, 0, 0);
				startLeft = imageWidth * 3;
				break;
			case R.id.rb4: // 更多
				this.tabHost.setCurrentTabByTag("tab5");
				rb1.setChecked(false);
				rb2.setChecked(false);
				rb3.setChecked(false);
				rb5.setChecked(false);
				MoveBg.moveFrontBg(img, startLeft, imageWidth * 4, 0, 0);
				startLeft = imageWidth * 4;
				break;
			}
		}
	}

	/**
	 * 在tabactivity中重写onKeyDown方法，取得反回键不起作用，重写dispatchKeyEvent就可以了
	 */
	@Override
	public boolean dispatchKeyEvent(KeyEvent event) {
		
	/**
	  注意在if判断中要加一个event.getAction()
       KeyEvent.ACTION_DOWN判断，因为按键有两个事件ACTION_DOWN和ACTION_UP，
       也就是按下和松开，如果不加这个判断，代码会执行两遍，而在下面的代码中就是弹两次AlertDialog
	*/
		if (event.getAction() == KeyEvent.ACTION_DOWN
				&& event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
			
				exit() ;
	            return false; 
			}
		
		return super.dispatchKeyEvent(event);
	}
	
	private void exit() {
		 if (!isExit) {  
	            isExit = true;  
	            CommUtils.showMessage("再按一次返回键返回到桌面", getApplicationContext()) ;
	            mHandler.sendEmptyMessageDelayed(0, 2000);  
	        } else {  
	            AppManager.getAppManager().AppExit(MainActivity.this);  
	        }  
		
	}  
   private Handler mHandler = new Handler() {  
       
       @Override  
       public void handleMessage(Message msg) {  
           
           super.handleMessage(msg);  
           isExit = false;  
       }  
 
   };  
   //是否退出的标志
   private boolean isExit; 
 
	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
		AppManager.getAppManager().finishActivity(this);
	}
}

 

 
 

余下来就是几个要跳转的Activity类了，具体看源码。
 最后附上源码下载地址： 
http://download.csdn.net/detail/android0012345/5828435 

 


                

        

        

    

  


    

      

        

            

              
                
                  TigerChain
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









              

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值