【模仿】模仿易信的UI

 

易信，它的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，就可以添加库

 

 

 

开始项目的讲解:

 

 

 

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