易信，它的UI还是很简洁，因此本人想模仿一下它，用了一天的时候来研究它的资源文件，终于被我写出来。先看下效果图吧。
(一)首页的标题
main_title.xml
<?xml version="1.0" encoding= "utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="44dip"
android:gravity="center_vertical"
android:padding="0.0px" > <ImageView
android:id="@+id/rlCommenTitleBG"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/comm_title_bg" /> <TextView
android:id="@+id/ivTitleName"
style="@style/A1_Font"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:ellipsize="end"
android:gravity="center"
android:paddingLeft="96.0dip"
android:paddingRight="96.0dip"
android:singleLine="true"
android:text="@string/app_name" /> <ImageButton
android:id="@+id/ivTitleBtnLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dip"
android:layout_centerVertical="true"
android:background="@drawable/showleft_selector"
android:gravity="center"
android:includeFontPadding="false" /> <ImageButton
android:id="@+id/ivTitleBtnRigh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/showright_selector"
android:gravity="center"
android:layout_marginRight="5dip"
android:includeFontPadding="false" /> </RelativeLayout>
(二) 左边的滑动菜单实现
通过SlidingMenu库与Fragment来实现当前最为流行的侧滑模式。其实涉及到的知识点有：
1.SlidingMenu
2.Fragment
准备工作: 马上去下载这个开源库，https://github.com/jfeinstein10/SlidingMenu
下载后的SlidingMenu文件，只需要在eclise导入library项目就行了。
导入后，项目名默认就是library,为了好看，我就把它改成了slidingmenu_library。注意，这项目只是一个库哦。待会你要自己新建一个项目里头引用它。
接下来就是建立我们自己的demo项目啦。
记得建完一个新项目后，请添加刚刚下载的Slidingmenu库。方法: 右键项目--》Properties--》Android--》点击Add，就可以添加库
记得建完一个新项目后，请添加刚刚下载的Slidingmenu库。方法: 右键项目--》Properties--》Android--》点击Add，就可以添加库
开始项目的讲解:
MainActivity: 项目的主类，左边的菜单是在主类初始化的。
Fragment_friend: 朋友圈功能的内容类
Fragment_setting: 设置功能的内容类
Fragment_yixin: 易信功能的内容类
LeftSlidingMenuFragment: 左边菜单
RoundedImageview : 圆角头像自定义类
主类的布局: activity_main.xml，只需要放一个FrameLayout即可以
< LinearLayout 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:background ="@color/white"
android:clickable ="true"
android:orientation ="vertical" > <include layout= "@layout/main_title" android:focusable ="true" />
<FrameLayout
android:id ="@+id/content_frame"
android:layout_width ="match_parent"
android:layout_height ="match_parent" /> </ LinearLayout>
主类: MainActivity.Java ，要继承SlidingFragmentActivity
public class MainActivity extends SlidingFragmentActivity implementsOnClickListener{
protected SlidingMenu mSlidingMenu ;
private ImageButton ivTitleBtnLeft ;
private Fragment mContent ;
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
initSlidingMenu();
setContentView(R.layout. activity_main );
initView();
}
private void initView() {
ivTitleBtnLeft = (ImageButton)this .findViewById(R.id. ivTitleBtnLeft);
ivTitleBtnLeft .setOnClickListener( this);
}
//初始化左侧菜单
private void initSlidingMenu() {
mContent = new Fragment_yixin();
getSupportFragmentManager()
.beginTransaction()
.replace(R.id. content_frame , mContent )
.commit();
setBehindContentView(R.layout. main_left_layout );//设置左边的菜单布局
FragmentTransaction mFragementTransaction = getSupportFragmentManager()
.beginTransaction();
Fragment mFrag = new LeftSlidingMenuFragment();
mFragementTransaction.replace(R.id. main_left_fragment , mFrag);
mFragementTransaction.commit();
mSlidingMenu = getSlidingMenu();
mSlidingMenu .setMode(SlidingMenu. LEFT); // 设置是左滑还是右滑，还是左右都可以滑，我这里只做了左滑
mSlidingMenu .setBehindOffsetRes(R.dimen. slidingmenu_offset); // 设置菜单宽度
mSlidingMenu .setFadeDegree(0.35f);// 设置淡入淡出的比例
mSlidingMenu .setTouchModeAbove(SlidingMenu. TOUCHMODE_FULLSCREEN); //设置手势模式
mSlidingMenu .setShadowDrawable(R.drawable. shadow); // 设置左菜单阴影图片
mSlidingMenu .setFadeEnabled( true); // 设置滑动时菜单的是否淡入淡出
mSlidingMenu .setBehindScrollScale(0.333f);// 设置滑动时拖拽效果
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ivTitleBtnLeft :
//点击标题左边按钮弹出左侧菜单
mSlidingMenu .showMenu( true);
break ;
default :
break ;
}
}
/**
* 左侧菜单点击切换首页的内容
*/
public void switchContent(Fragment fragment) {
mContent = fragment;
getSupportFragmentManager()
.beginTransaction()
.replace(R.id. content_frame , fragment)
.commit();
getSlidingMenu().showContent();
}
}
左侧菜单: LeftSlidingMenuFragment
public class LeftSlidingMenuFragment extends Fragment implements OnClickListener{
private View yixinBtnLayout; //左侧菜单的易信功能
private View circleBtnLayout; //左侧菜单的朋友圈功能
private View settingBtnLayout; //左侧菜单的设置功能
@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.main_left_fragment, container,
false);
yixinBtnLayout = view.findViewById(R.id.yixinBtnLayout);
yixinBtnLayout.setOnClickListener(this);
circleBtnLayout = view.findViewById(R.id.circleBtnLayout);
circleBtnLayout.setOnClickListener(this);
settingBtnLayout = view.findViewById(R.id.settingBtnLayout);
settingBtnLayout.setOnClickListener(this);
System.out.println();
return view;
}
@Override
public void onClick(View v) {
Fragment newContent = null;
switch (v.getId()) {
case R.id.yixinBtnLayout: //易信的点击事件
newContent = new Fragment_yixin();
yixinBtnLayout.setSelected(true);
circleBtnLayout.setSelected(false);
settingBtnLayout.setSelected(false);
break;
case R.id.circleBtnLayout: //朋友圈的点击事件
newContent = new Fragment_friend();
yixinBtnLayout.setSelected(false);
circleBtnLayout.setSelected(true);
settingBtnLayout.setSelected(false);
break;
case R.id.settingBtnLayout: //设置的点击事件
newContent = new Fragment_setting();
yixinBtnLayout.setSelected(false);
circleBtnLayout.setSelected(false);
settingBtnLayout.setSelected(true);
break;
default:
break;
}
if (newContent != null)
switchFragment(newContent);
}
/*
* 切换到不同的功能内容
*/
private void switchFragment(Fragment fragment) {
if (getActivity() == null)
return;
MainActivity ra = (MainActivity) getActivity();
ra.switchContent(fragment);
}
}
左侧菜单用到两个布局: main_left_layout.xml 和main_left_fragment.xml
main_left_fragment.xml 是要嵌入到main_left_layout显示具体的UI元素，main_left_layout.xml是一个根布局
main_left_layout.xml
<? xml version ="1.0" encoding= "utf-8" ?>
< FrameLayout xmlns:android ="http://schemas.android.com/apk/res/android"
android:id ="@+id/main_left_fragment"
android:layout_width ="match_parent"
android:layout_height ="match_parent"
android:background ="@color/white" > </ FrameLayout>
main_left_fragment.xml
<? xml version ="1.0" encoding= "utf-8" ?>
< ScrollView android:background ="@color/tools_box_bg" android:scrollbars ="none" android:layout_width ="fill_parent" android:layout_height ="fill_parent"
xmlns:android ="http://schemas.android.com/apk/res/android" >
<LinearLayout android:orientation= "vertical" android:id ="@+id/llRoot"android:layout_width ="fill_parent" android:layout_height ="wrap_content" >
< com.chaowen.yixin.RoundedImageView android:layout_gravity ="center_horizontal" android:id ="@+id/headImageView" android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:layout_marginTop = "25.0dip" android:src ="@drawable/head_default_yixin" android:adjustViewBounds = "true" android:maxHeight ="80dip" android:maxWidth= "80dip" />
< TextView android:textSize ="16.0sp" android:textColor ="#ffccccc6"android:layout_gravity ="center_horizontal" android:id ="@+id/nickNameTextView"android:layout_width ="wrap_content" android:layout_height ="wrap_content"android:layout_marginTop = "10.0dip" android:text ="511644784" />
< TextView android:textSize ="12.0sp" android:textColor ="#ffa8a8a3"android:layout_gravity ="center_horizontal" android:id ="@+id/yixinCodeTextView" android:layout_width ="wrap_content" android:layout_height ="wrap_content"android:layout_marginLeft = "10.0dip" android:layout_marginTop = "6.0dip"android:layout_marginRight = "10.0dip" android:layout_marginBottom = "10.0dip" />
< include android:id ="@+id/yixinBtnLayout" layout ="@layout/toolbox_item_yixin" />
< include android:id ="@+id/circleBtnLayout" layout ="@layout/toolbox_item_friend" />
< include android:id ="@+id/settingBtnLayout" layout ="@layout/toolbox_item_setting" />
< View android:background ="#ff1c1c1b" android:layout_width ="fill_parent" android:layout_height ="1.3299866dip" />
< View android:background ="#ff474745" android:layout_width ="fill_parent" android:layout_height ="1.0px" />
< TextView android:textSize ="12.0sp" android:textColor ="#ff999994"android:gravity ="center" android:layout_gravity ="bottom|center" android:id ="@+id/inviteFriendBtnLayout" android:background ="@drawable/tools_box_invite_btn_selector" android:layout_width= "wrap_content"android:layout_height ="wrap_content" android:layout_marginTop = "70.0dip"android:text ="邀请好友" />
</LinearLayout >
</ ScrollView>
com.chaowen.yixin.RoundedImageView 是一个圆形头像的自定义imageView类哦。
后面会继续更新UI。还没做完的，呵呵。
http://pan.baidu.com/share/link?shareid=3913241068&uk=1863281063