Android UI 模仿界面框架系列第一章:QQ UI框架
2015-03-16 15:09
381 查看
闲着无聊写了个 QQ5.4UI. 后面还有一系列 QQ模仿开发文章.今天首先来个 UI 框架.
主界面采用: android.support.v4.widget.DrawerLayout 作为父布局,多的不说上代码.
这是主界面 XML.下面是主界面管理器 fragmentactivity
主界面采用: android.support.v4.widget.DrawerLayout 作为父布局,多的不说上代码.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/id_drawerLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/img_frame_background" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:layout_width="40dp" android:layout_height="30dp" android:layout_alignParentRight="true" android:layout_marginTop="10dp" android:background="@drawable/ic_search_back_r" android:onClick="OpenRightMenu" /> <FrameLayout android:id="@+id/id_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="50dp" android:layout_weight="1" android:background="@color/white" android:visibility="visible" > </FrameLayout> <RelativeLayout android:id="@+id/ly_main_tab_bottom" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="#00000000" android:visibility="visible" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="vertical" > <View android:layout_width="match_parent" android:layout_height="0.1dp" android:background="#cfcfcf" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="90dp" android:background="#fafafa" > <ImageView android:id="@+id/txt_main_one" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center_vertical" android:layout_weight="4" android:src="@drawable/skin_tab_icon_conversation_normal" android:gravity="center" android:paddingTop="3dp" android:textColor="#6e6e6e" android:textSize="12sp" /> <ImageView android:id="@+id/txt_main_two" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center_vertical" android:layout_weight="4" android:src="@drawable/skin_tab_icon_contact_normal" android:gravity="center" android:paddingTop="3dp" android:textColor="#6e6e6e" android:textSize="12sp" /> <ImageView android:id="@+id/txt_main_three" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center_vertical" android:layout_weight="4" android:src="@drawable/skin_tab_icon_plugin_normal" android:gravity="center" android:paddingTop="3dp" android:text="@string/fragmen_txt_three" android:textColor="#6e6e6e" android:textSize="12sp" /> <ImageButton android:visibility="gone" android:id="@+id/txt_main_four" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="center_vertical" android:layout_weight="4" android:background="@drawable/kou" android:gravity="center" android:paddingTop="3dp" android:textColor="#6e6e6e" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </RelativeLayout> </RelativeLayout> <fragment android:id="@+id/id_left_menu" android:name="com.zhuxiaohao.application.fragment.LeftFragment" android:layout_width="200dp" android:layout_height="match_parent" android:layout_gravity="left" android:tag="LEFT" /> <fragment android:id="@+id/id_right_menu" android:name="com.zhuxiaohao.application.fragment.RightFragment" android:layout_width="100dp" android:layout_height="match_parent" android:layout_gravity="right|center_vertical" android:tag="RIGHT" /> </android.support.v4.widget.DrawerLayout>
这是主界面 XML.下面是主界面管理器 fragmentactivity
/** * Project Name:com.zhuxiaohao.application * File Name:MainFragment.java * Package Name:com.zhuxiaohao.application.fragment * Date:2015年3月13日下午2:43:22 * Copyright (c) 2015, zhuxiaohao All Rights Reserved. * */ package com.zhuxiaohao.application.fragment; import android.annotation.SuppressLint; import android.content.Context; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v4.widget.DrawerLayout; import android.support.v4.widget.DrawerLayout.DrawerListener; import android.view.Gravity; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageView; import com.nineoldandroids.view.ViewHelper; import com.zhuxiaohao.application.R; /** * ClassName:MainFragment <br/> * Function: TODO ADD FUNCTION. <br/> * Reason: TODO ADD REASON. <br/> * Date: 2015年3月13日 下午2:43:22 <br/> * * @author chenhao * @version * @since JDK 1.6 * @see */ public class MainFragment extends FragmentActivity implements OnClickListener { /** 上下文 */ @SuppressWarnings("unused") private static Context context; /** 管理器 */ private FragmentManager fragmentManager; /** 其他界面切换 */ public static MainFragment fragmentMainActivity; /** 第1个 fragmen */ private OneFragment oneFragment; private ImageView txt_main_one; /** 第2个 fragmen */ private TwoFragment twoFragment; private ImageView txt_main_two; /** 第3个 fragmen */ private ThreeFragment threeFragment; private ImageView txt_main_three; /** 第4个 fragmen */ private FourFragment fourFragment; private ImageView txt_main_four; /** view */ private DrawerLayout mDrawerLayout; @Override protected void onCreate(Bundle arg0) { // TODO Auto-generated method stub super.onCreate(arg0); setContentView(R.layout.layout_fragment_main); context = getApplicationContext(); fragmentManager = getSupportFragmentManager(); fragmentMainActivity = this; initViewDrawerLayout(); initEvents(); initView(); } /** * initViewDrawerLayout:(初始化 Drawerlayout 布局). <br/> * * @author chenhao * @since JDK 1.6 */ private void initViewDrawerLayout() { mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawerLayout); mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT); } /** * OpenRightMenu:(初始化右边view). <br/> * @author chenhao * @param view * @since JDK 1.6 */ public void OpenRightMenu(View view) { mDrawerLayout.openDrawer(Gravity.RIGHT); mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.RIGHT); } /** * initEvents:(滑动监听). <br/> * @author chenhao * @since JDK 1.6 */ private void initEvents() { mDrawerLayout.setDrawerListener(new DrawerListener() { @Override public void onDrawerStateChanged(int newState) { } @Override public void onDrawerSlide(View drawerView, float slideOffset) { View mContent = mDrawerLayout.getChildAt(0); View mMenu = drawerView; float scale = 1 - slideOffset; float rightScale = 0.8f + scale * 0.2f; if (drawerView.getTag().equals("LEFT")) { float leftScale = 1 - 0.3f * scale; ViewHelper.setScaleX(mMenu, leftScale); ViewHelper.setScaleY(mMenu, leftScale); ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale)); ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * (1 - scale)); ViewHelper.setPivotX(mContent, 0); ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2); mContent.invalidate(); ViewHelper.setScaleX(mContent, rightScale); ViewHelper.setScaleY(mContent, rightScale); } else { ViewHelper.setTranslationX(mContent, -mMenu.getMeasuredWidth() * slideOffset); ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth()); ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2); mContent.invalidate(); ViewHelper.setScaleX(mContent, rightScale); ViewHelper.setScaleY(mContent, rightScale); } } @Override public void onDrawerOpened(View drawerView) { } @Override public void onDrawerClosed(View drawerView) { mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT); } }); } /** 初始化 */ private void initView() { // TODO Auto-generated method stub txt_main_one = (ImageView) findViewById(R.id.txt_main_one); txt_main_two = (ImageView) findViewById(R.id.txt_main_two); txt_main_three = (ImageView) findViewById(R.id.txt_main_three); txt_main_four = (ImageView) findViewById(R.id.txt_main_four); txt_main_one.setOnClickListener(this); txt_main_two.setOnClickListener(this); txt_main_three.setOnClickListener(this); txt_main_four.setOnClickListener(this); setTabSelection(0); } @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.txt_main_one: setTabSelection(0); break; case R.id.txt_main_two: setTabSelection(1); break; case R.id.txt_main_three: setTabSelection(2); break; case R.id.txt_main_four: setTabSelection(3); break; } } /** * 根据传入的index参数来设置选中的tab页。 */ @SuppressLint({ "NewApi", "ResourceAsColor" }) public void setTabSelection(int index) { resetBtn(); FragmentTransaction transaction = fragmentManager.beginTransaction(); hideFragments(transaction); switch (index) { case 0: // // 当点击了tab时,改变控件的图片和文字颜色 ((ImageView) txt_main_one.findViewById(R.id.txt_main_one)).setImageResource(R.drawable.skin_tab_icon_conversation_selected); if (oneFragment == null) { // 如果为空,则创建一个并添加到界面上 oneFragment = new OneFragment(); transaction.add(R.id.id_content, oneFragment, index + ""); } else { // 如果不为空,则直接将它显示出来 transaction.show(oneFragment); } break; case 1: // 当点击了tab时,改变控件的图片和文字颜色 ((ImageView) txt_main_two.findViewById(R.id.txt_main_two)).setImageResource(R.drawable.skin_tab_icon_contact_selected); if (twoFragment == null) { // 如果为空,则创建一个并添加到界面上 twoFragment = new TwoFragment(); transaction.add(R.id.id_content, twoFragment, index + ""); } else { // 如果不为空,则直接将它显示出来 transaction.show(twoFragment); } break; case 2: // 当点击了tab时,改变控件的图片和文字颜色 ((ImageView) txt_main_three.findViewById(R.id.txt_main_three)).setImageResource(R.drawable.skin_tab_icon_plugin_selected); if (threeFragment == null) { // 如果为空,则创建一个并添加到界面上 threeFragment = new ThreeFragment(); transaction.add(R.id.id_content, threeFragment, index + ""); } else { // 如果不为空,则直接将它显示出来 transaction.show(threeFragment); } break; case 3: // 当点击了tab时,改变控件的图片和文字颜色 ((ImageView) txt_main_four.findViewById(R.id.txt_main_four)).setImageResource(R.drawable.kov); if (fourFragment == null) { // 如果为空,则创建一个并添加到界面上 fourFragment = new FourFragment(); transaction.add(R.id.id_content, fourFragment, index + ""); } else { // 如果不为空,则直接将它显示出来 transaction.show(fourFragment); } break; } transaction.commitAllowingStateLoss(); } /** * 删除所有选中的。 */ @SuppressLint("ResourceAsColor") private void resetBtn() { ((ImageView) txt_main_one.findViewById(R.id.txt_main_one)).setImageResource(R.drawable.skin_tab_icon_conversation_normal); ((ImageView) txt_main_two.findViewById(R.id.txt_main_two)).setImageResource(R.drawable.skin_tab_icon_contact_normal); ((ImageView) txt_main_three.findViewById(R.id.txt_main_three)).setImageResource(R.drawable.skin_tab_icon_plugin_normal); ((ImageView) txt_main_four.findViewById(R.id.txt_main_four)).setImageResource(R.drawable.kou); } /** * 把所有的碎片为隐藏状态。 * * @param transaction */ @SuppressLint("NewApi") private void hideFragments(FragmentTransaction transaction) { if (oneFragment != null) { transaction.hide(oneFragment); } if (twoFragment != null) { transaction.hide(oneFragment); } if (threeFragment != null) { transaction.hide(threeFragment); } if (fourFragment != null) { transaction.hide(fourFragment); } } }
相关文章推荐
- Lance老师UI系列教程第三课->QQ登录注册界面的实现(android-2012最新版)
- Lance老师UI系列教程第三课->QQ登录注册界面的实现(android-2012最新版)
- Android UI 模仿界面框架系列第二章:QQ 聊天界面开发和及时通讯功能开发
- Lance老师UI系列教程第三课->QQ登录注册界面的实现(android-2012最新版)
- Lance老师UI系列教程第一课->QQ设置界面的实现(android)
- Lance老师UI系列教程第一课->QQ设置界面的实现(android)
- Lance老师UI系列教程第三课->QQ登录注册界面的实现(android-2012最新版)
- Lance老师UI系列教程第三课->QQ登录注册界面的实现(android-2012最新版)
- Lance老师UI系列教程第一课->QQ设置界面的实现(android)
- Lance老师UI系列教程第一课->QQ设置界面的实现(android)
- Android数据库ORMlite框架翻译系列(第一章)
- Android UI布局—— 仿QQ登录界面
- iOS之UI--主流框架的搭建--仿制QQ的UI框架
- Android开发系列 QQ登陆界面——Android控件使用实例 - Carlos.V
- UIPro实例讲解之QQ2014 UI模仿系列二
- UIPro实例讲解之QQ2014 UI模仿系列三
- Android数据库ORMlite框架翻译系列(第一章)
- 【iOS基础控件 - 11】【Demo】模仿qq ,微信 UI 聊天界面
- [转]Android:布局实例之模仿QQ登录界面
- (转)Android QQ空间(Apad)项目总结(三)---应用UI框架的搭建!!!