Android 微信主页面_#22292c

作者：很楠不爱3 | 2024-06-05 11:51:57

踩

#22292c

微信主页

通过ViewPager和Fragment组合使用实现

本文通过ViewPager和Fragment组合的方法实现微信主页的效果。

效果图如下：

Demo源码连接在文章尾部给出。

主页面的UI设计非常简单，如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff" >

    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentTop="true"
        android:background="#22292c" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="56dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:clickable="true"
            android:src="@drawable/main_activtiy_add_normal" />

        <ImageView
            android:id="@+id/iv_search"
            android:layout_width="56dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/iv_add"
            android:clickable="true"
            android:src="@drawable/main_activity_search_normal" />

        <TextView
            android:visibility="gone"
            android:id="@+id/tv_online"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="#ffffff"
            android:padding="3dp"
            android:text="最近在线"
            android:textColor="#353535" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/main_bottom"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <RelativeLayout
            android:id="@+id/re_weixin"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/ib_weixin"
                android:layout_width="wrap_content"
                android:layout_height="28dp"
                android:layout_centerHorizontal="true"
                android:background="#ffffff"
                android:focusable="false"
                android:scaleType="centerInside"
                android:src="@drawable/tab_weixin" />

            <TextView
                android:id="@+id/tv_weixin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ib_weixin"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:text="微信"
                android:textColor="#9A9A9A"
                android:textSize="12sp" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/re_contact_list"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/ib_contact_list"
                android:layout_width="wrap_content"
                android:layout_height="28dp"
                android:layout_centerHorizontal="true"
                android:background="#ffffff"
                android:focusable="false"
                android:scaleType="centerInside"
                android:src="@drawable/tab_contact_list" />

            <TextView
                android:id="@+id/tv_contact_list"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ib_contact_list"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:text="通讯录"
                android:textColor="#9A9A9A"
                android:textSize="12sp" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/re_find"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/ib_find"
                android:layout_width="wrap_content"
                android:layout_height="28dp"
                android:layout_centerHorizontal="true"
                android:background="#ffffff"
                android:focusable="false"
                android:scaleType="centerInside"
                android:src="@drawable/tab_find" />

            <TextView
                android:id="@+id/tv_find"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ib_find"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:text="发现"
                android:textColor="#9A9A9A"
                android:textSize="12sp" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/re_profile"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:onClick="onTabClicked"
            android:padding="3dp" >

            <ImageView
                android:id="@+id/ib_profile"
                android:layout_width="wrap_content"
                android:layout_height="28dp"
                android:layout_centerHorizontal="true"
                android:background="#ffffff"
                android:focusable="false"
                android:scaleType="centerInside"
                android:src="@drawable/tab_profile" />

            <TextView
                android:id="@+id/tv_profile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ib_profile"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="3dp"
                android:text="我"
                android:textColor="#9A9A9A"
                android:textSize="12sp" />
        </RelativeLayout>
    </LinearLayout>

    <View
        android:id="@+id/view_temp"
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:layout_above="@id/main_bottom"
        android:background="#d6d6d6" />

    <!-- VIewPager 主要是加载内容的 -->  
     <android.support.v4.view.ViewPager  
        android:id="@+id/viewpager"  
        android:layout_above="@id/view_temp"  
        android:layout_below="@id/title"
        android:layout_marginBottom="2dp"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"/>  

</RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

MainWeiXinActivity.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainWeiXinActivity extends FragmentActivity {

    @SuppressWarnings("unused")
    private ImageView iv_add;
    @SuppressWarnings("unused")
    private ImageView iv_search;
    private ViewPager mViewPager;
    private Fragment[] fragments;
    private FirstFragment firstFragment;
    private SecondFragment secondFragment;
    private ThirdFragment thirdFragment;
    private FourthFragment fourthFragment;
    private ImageView[] imagebuttons;
    private TextView[] textviews;
    private int index;
    // 当前fragment的index
    private int currentTabIndex;
    //屏幕宽度  
    int screenWidth;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_wei_xin);

        initView();

    }

    private void initView() {
        // TODO Auto-generated method stub
         iv_add = (ImageView) this.findViewById(R.id.iv_add);
         iv_search = (ImageView) this.findViewById(R.id.iv_search);

         mViewPager=(ViewPager) findViewById(R.id.viewpager);

         firstFragment = new FirstFragment();
         secondFragment = new SecondFragment();
         thirdFragment = new ThirdFragment();
         fourthFragment = new FourthFragment();

         fragments = new Fragment[] {firstFragment , secondFragment , thirdFragment , fourthFragment};

         imagebuttons = new ImageView[4];
         imagebuttons[0] = (ImageView) findViewById(R.id.ib_weixin);
         imagebuttons[1] = (ImageView) findViewById(R.id.ib_contact_list);
         imagebuttons[2] = (ImageView) findViewById(R.id.ib_find);
         imagebuttons[3] = (ImageView) findViewById(R.id.ib_profile);

         imagebuttons[0].setSelected(true);
         textviews = new TextView[4];
         textviews[0] = (TextView) findViewById(R.id.tv_weixin);
         textviews[1] = (TextView) findViewById(R.id.tv_contact_list);
         textviews[2] = (TextView) findViewById(R.id.tv_find);
         textviews[3] = (TextView) findViewById(R.id.tv_profile);
         textviews[0].setTextColor(0xFF45C01A);

         screenWidth=getResources().getDisplayMetrics().widthPixels;  

         mViewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager())); 

         //滑动监听
         mViewPager.addOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
                 selectedTab(arg0);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }
    //ViewPager的适配器设置
    class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }

        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return fragments[arg0];
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return fragments.length;
        }

    }
    /*
     * 导航按钮监听
     */
     public void onTabClicked(View view) {
            switch (view.getId()) {
            case R.id.re_weixin:
                index = 0;
                break;
            case R.id.re_contact_list:
                index = 1;
                break;
            case R.id.re_find:
                index = 2;
                break;
            case R.id.re_profile:
                index = 3;
                break;

            }

            if (currentTabIndex != index) {
                mViewPager.setCurrentItem(index);
            }
            selectedTab(index);
    }

     /*
      * 修改导航按钮状态
      */
    private void selectedTab(int arg0) {
            // TODO Auto-generated method stub
        imagebuttons[currentTabIndex].setSelected(false);
        imagebuttons[arg0].setSelected(true);
        textviews[currentTabIndex].setTextColor(0xFF999999);
        textviews[arg0].setTextColor(0xFF45C01A);
        currentTabIndex = arg0;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

Fragment的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView 
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:layout_gravity="center"
        />
</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

大家可以在这里自行修改布局。

FirstFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FirstFragment extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);
        TextView tv = (TextView)view.findViewById(R.id.text_view);
        tv.setText("这是第一个Fragmnet");

        return view;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

总体代码就是这么多，还有些导航栏点击时，图片状态变化就不粘贴上来了，有需要的可以下载源码观看。总的来说，源码是不是很简单，每个复杂的UI都可以拆分成很多小块，当我们把这些小模块学好了，再回去看哪些复杂的UI，就会有信心解决了。不积跬步，无以至千里。

点击下载源码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/676385