模仿易信的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