【模仿】模仿易信的UI

最新推荐文章于 2025-08-05 14:59:02 发布

转载最新推荐文章于 2025-08-05 14:59:02 发布 · 1.2k 阅读

文章标签：

#易信 #slidingMenu

安卓开发进阶同时被 2 个专栏收录

119 篇文章

订阅专栏

安卓晋级Senior Android

116 篇文章

订阅专栏

易信，它的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