1.ViewPager实现Tab

目录结构:

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ8AAAHhCAIAAAD/A6ybAAAgAElEQVR4nO2dX3AU153v5yXvPKQqy0Mq2ayXpaIs3LCJl8x6dfNyjbP7EK4rqhJVcZm6iueGvd4K1mUT+RovkrIiY4Sv+9qASXmRBWuxMrYS2ZgBbBQJHAlwqKxsgz2rCaBBYInRjCz+WGqQybkPPdN9uvt095mZ7jmnp7+f6nJpek53H+HfR316pr99YgQAwEdMdAcACA2wBQBeYAsAvNTIlse6G+ilNgcFwF9qYYtFD9gCQkogtrw/8KS2EJYbbFsySjwWVzJBdKd6Mko8lkiJ7gUQjf+2jL/+JP2y3m1JJWIa1s5nlLi0vw+oDN9s2d3xzO6OZ3Z3JO9e77l7vWfh8p78+92k5MbujqS2EBlHYp6nDqcGlOKpRExvklHiTIFAyCnPluHh4WQyyXzrmaee7fp/Z8iNU6aFEBKC65ZKbTGt1l8UFUolYEu9UYYtQ0NDDQ0NK1ascGrQ+sQLZPawdSGEUJ+JEbeRmFZ5qUQsrqSKf54TKWOwQxWfPv6JxUxl7L3eVsHUJtp7pTNDzHyySKSMlsX1qQR9EIsesKX+4LVFU6W5udnFlpb/+Uty7RXGwoPJllLhavWprTY3MArRGALxrXc9NiEZJVFqauxBE6jUpLTecsaBLXUPly26Khs2bHCxhRCSO/tytq8pd/ZlQsjGH/Vs/NE+bXn0R/s2PrbvUe3nx/Zt/NE+65aWc4tRsLafrWVY2pJ3PbFdmlsHWrazi6UBtWfYEiW8baFV8bQl29dEPv8w29dECHkje89p+e8//DfrllXZUtZ6O5QMGSWun4iM1c62GHu2Kgdb6g9vW5LJ5AqK7du3O7XMjexU0+3rV8bUdHtu5FlCyKsf3Xn1I/XVj+5Qi/rfmvoZG/PbYh9xUR9LOa3XR1EKo4KpQqcOmFHippGY6RMvm0U2OWBL/eHn9y3ZvibdFu300jN2s2f0Zs/YzX2jN3vGbvaM3fzO+tfZG5dhCyn7Kt8YWrE/+iq+H1cyVNN4ImE6tySsF/nue4Yt9YdvtmQPtxVGNqrp9g/2Narp9sLwxiuH255P5Z8/Mvt8avb5I/nnU7Or/27Qr8MBUHv8s6Wv6d6lzsKpLetXxgqntty72Jnta1r54GF68etYAAjBN1vGulb9cWrPfFo5suvh+bRCruwZ61rl184BkAHfbLl2unesaxW9XDvd69fOAZABpMEA4AW2AMALbAGAF9gCAC+wBQBeYAsAvMhuy3z62GTvsvn0sUD2Xu7dKU5xaNzlEg1kt2Wyd9n8mZWTvcu8GppufOSlRra4B2w84zdAFoK1ZXR09Pbt29XsYbx92WTvMu/TS0aJx+NlP5jFr3OC6360Gy+d3nd/F0hFsLYcPHiwv78/n897dOKxY/dv/dXq9sMrf378T7pHlz333hd2fxh77BjRR2IjKyf3up1etCyLOZ3FQQ1sKd2+zH7f/V0gGYHbksvlXnrppatXr7o0+9K6rcxFe3e8fdn8yFfTiostzOBXKhGLK4p7pt+S/KJCzsyb/02JL+Z+7B2LJVJONrm/C6QjcFsIIfl8XlGUiYkJl5ardm90WrTBWFpxHoyZgl/mDIyRTzGSZKZ6p2xhv0NvZH42gENrU7+0Rkwf3N8FElILWwgh09PTHR0dc3NzTi2/0P5Q27Gt9uUL7Q/Np4+NJ5fNHPtqOsk+vThExujVDqlj46U5J+wU8ddb8WTwHbrC9S6QklrYUigUPM8tX2h/yGkhhIy3L5s59tXxdqYt5hGRMXDy15a4kinLFupJGIzRmvu7QFICt2V2dtbzuuVk6391X7TB2HgbazBmGhMRhwGO/phV2yMlmbY4RfzZIzF6P2zMVrqcZoDUSPGZ2NCPvzWx/wmnZejH35pPHzvTtmxm8E/OtFlPL1ZZjDVMW8wP4lMczi3mduyrfPZ+2MCW+kCK71tSzfed3/H32vKh+YcPd/x9qvk+QoiTLQDUDCm+yx/83he15Y3vfXHwodLyvS8OPlRcQwg507ZMW0R3FkQXKWwBIBTAFgB4gS0A8AJbAOAFtgDAC2wBgBfYAgAvsAUAXmS3pc5z+TWe99w4nOfEtBXss/6R3ZYw5/JNNxo7TxwTXKnZlIAt1SHFfWIuhDmXT93K6VtJlVXlLo39syVKSHEPcp3m8ilbfDsUbBEJcvnB5fKZtpgPVNyh6dRjHi7RPaCOaOukS+6ftYLqBuM3pP4dbPM7O/wK1n8T06/jOhoNEcjlB5fLZ47EzAdihDH1VRklQf8q9tmVLQEeezF62BKj98Rc79wH1l8QVn/q6xyGXH5guXzTVb5DWdtLzf6+6Q+zeRZlM7YueJ5b7G8wqtutD8T8b8Loj7a2Tj4GQC4/oFw+tZV1JdOW4j6Mbdg5aNsGLv+m1dvi2Qfi/G9i60kdOINcfnC5/PJsIRklHk8k6EQ0PY5jj8To0aB9wOM1EjP9AiwTvPvgMjot2qewrvlCihSfidVpLr9MW6xfGRkjoHgioTcrrnW8BLceyzQwspwfEraLfNY5x9YHV+Fte7R/khBepPi+Bbl8EAqk+C4fuXwQCqSwBYBQAFsA4AW2AMALbAGAF9gCAC+wBQBeYAsAvMAWAHgJgS2JxjWiuwAAIVLZ8m73/fpCCOlct9y+iO4jiDSy2DLw+H30y6n/ON65bvndhbdnxnbtfORB7QfYAsRSI1uGh4eTyaTTu+923a/O7FVn9s6nlZnx5ORI26eXxzrXLZ8Z2/XBa+2JxjXaD7AFiKUWtgwNDTU0NKxYscKpwYmuNer8GXp58vvf7Vy3fOcjDyYa12jLzkce7Fy3nHkN4xDuY4fsQ59IAuII3BZNlebmZjdbtq1RZwbp5fOFy/pILNG4xm0k5piN9YrNA1Amwdqiq7JhwwYXW97atkad7NWXgdbVLotta3vy2z02DECFBGgLrYq7LQOtDWpa0ZaB1tXq5F7mMjOeZNmiQSe/YQsIhABtSSaTKyi2b9/u1LLv8fvUdFJNJwdaV2s/2BdHVRjJb0bIXs8HKxAHVIoUnyD3PPpldbxtoHW1Ot7OXFzPKvbkN/PpDfWSDQfikMKW5x5ePtC6Wh1vYy7uqgBQM6SwhRDSk/gLl0V07wAgRB5bAJAf2AIAL7AFAF5gCwC8wBYAeIEtAPACWwDgBbYAwEsd2vLEA18SdmzTBJLyUA9zp8hAPdgy3PnNk//nL/Xlhaav0C+HO79Zu66Ezxb9Jjtrt5mzz0ScerDl5M8aMsM9187uv3Z2/+9f6+7Z3Ey/PPmzBtEdDBrPU4dTA0pu22RnyJnakd0W90B/sc0/ff3a2f13brxTeP/gx8de7NncTL8c/qev16ar4qjUFtvMZHreIa5kEAuyI7UtnoF+jXee+Pq1s/sL7x8svH/w4+N7NVv0l+884WKLPa/PmkBPC5Slin9xi7P0OQ1f6DliPTZhHotrPXsnPDPc0+tTCUsMyHvm2Wgjry08gX6No/+48vevdX987MWPj+893dv55Pe/S788+o8rHbaz5/Vtk7NS84/GjGle2dOVmtd4buJ2LO/1JsxTP3rOcF9abw/NwRZ3JLWFM9BPCHnigS+90PSVns3N2vLk97+rLfqaF5q+wv6UzF4OjIm/7dMjO/1s3sJzE6dj8a6nsVrrMcM9vU/YUg4y2sIf6Nf4Vcuf05f1T37/u/TLX7X8OXszLlv0s0MNbClrPQ0lA88M92wDrcrBFjsy2sIf6Nd4deOfuVzlv7rxzxy2s+f1baMg4wMj19LXP1vit8XtWI7rTb01PtCiCt15hnvzJ142i2xywBY7MtpSLn0//JrLVX7fD7/muCUjr+98le+zLU7Hcl5v6S318W/xnXjRoeI1v2WG+wRr4nrnJxbAFjv1YMuBDV+jL+t7NjfTLw9scLYFgHKoB1tGf76md8Of6ssLTV+hX47+HBNaAH+oB1ssiLxPDNQ1dWgLAAEBWwDgBbYAwAtsAYAX2AIAL7AFAF4ibcubO/4LcxHdLyApkbbl18lv3rn7uWU5/+amoIQJIofsss9yDydpTFoiIm3L679YY7dlYmjrBQ9h6HnIaOh5YZ228yxH0x2Q3sCWGlJvtoyOjt6+fZuzcf/2v1q887m2nM4WVv6PPf9LOTF55rmJoa3n3/zxq11/5bBdRonH4nHrQx6oWxurIKPE43GvJ7SU+wwXPPPFH+rNloMHD/b39+fzeZ7Gr/z8W58tLn22uLSgLum2fKYuLahLn6lLff/yLYftMko8llDsEay4olR7464WZzHHtBw6AFtqTh3aksvlXnrppatXr3o2frnz27cWlm4tLN1cMGy59dnSrc+Wbi0s9XZ+22G7YvGZ7mnXXtCr7Pl4y/38ij2p75T9ohP5iimIX9ynaRRVfGF0U2+fSMRtfbb+WszOs/bP/B3rmjq0hRCSz+cVRZmYmHBv/K/bvj1/a2n+1t3524Yt87fvzt9a+vT20r9uu99hOyp7aIlVGfXHysdbUvvGptQjNNj5M8eIJisNXVrFzE5SO7aewej29s7b989+BkA9U5+2EEKmp6c7Ojrm5uZcGr/49F/nb94t3Libv3lHtyV/427h5p3Czbt7tv61w3bWhwmZApHmM4XtD7Q9K2Y85o6dGmPEsli2mKJplsPRZw26r06P4GB13r5/drN6pj5tKRQKPOeW559ae/3TO9c/vXN93rDl+vyd3Pyd6/N3XnjqOw7bWf9UK/bKZubjPWyhI5NU/fHaUmxoyOeQy9caMC5lTP20h/uZ+2c0q2Pq0JbZ2VnO65b/+7PvfDKnns4W/qF39B96RzVbPinc+WROnS6oz/6MwxbT448I8yRjfCTsbot1MEOPgSzPD2DbQjJKPJ5IxOkDs55iwWhmPmmww/22DZ2a1S91aAv/Z2LJn/7N1Kx6OltobP13TZWrs+rUrDqVV6dm7zzz079x2M76p5oV4Gfl411tsY/8rc8Ds3xeYLrKN/rC7Jnl023TlRDjoQLMcL9t/47N6pZ6s6Ws71u6/vcD2etqNqce/eDq0Q+uZnNqNqdO5tTsdTWbW/yXLQ8E2lWBsJ9QEY3RVDXUmy1l0fHEA5dnFi/NqJdnFi8X/7t4eWbx0szipZnFzifq1BYHK/BVvieRtmXb5r996ieNWzc3bt3c+BT1360/adz6k8Ztm/9WdAf9x3yZZV6LE4sXkbYFgLKALQDwAlsA4AW2AMALbAGAF4lseay7gV5EdwcAK7LYYtEDtgAJkcIWuxv0mkQjHvvNwYUdu3f1u91xHSi5/v6nN53LEULGjj+946KobgSMRLa8232/tuhrOtcttyw16MzFQ+t2P71u96Gx0oqpc7vW7X5aWySuAxdb/BeJ/jdZt3tX/1ylthT/tQV6Xg7B2sJ515bTueXuwtszY7t2PvKg9kPNbDl+ofQi19//NPWSjB2v3f/XqXO76EN7UXNbHPpW/rlF7FmxHIK1hf+OYOZ1y8zYrg9ea080rtF+qLktZdarz8AW6QjcFv6UPP1pmPbfnY88mGhcoy07H3mwc91yh2sYPUdleY4EHWenMhmMQLyBYUuuv9/t/+LY8dJQpP/kVGnNpnMnd5hXMltq1TZ2XB+E5Pr7S22OXzBtUqok+07MzVzGM3Q5Wg80dW6XscO5k5sc+mPBZkuuv78oCW0Lo89zJzdZh7WwRYMzJX9iG/s6XhuAJRrXuI7E6GAIHeezPlFCT1YxAvEUhi3sItNrQhumE6p0xo7rFzymcby9pTbu16tq6tyh0oEu7CitpyvS8XB6yV48xGML60D0u3r3GP2hMV239J+cYtnC6rPRjNk92amFLcQrJf/WtjXqZK++DLSudlmsGztN827L7doepmJkZmnYthQplcKFHbvpP+rFv52W+th0LufUkjGSsf3Rpdowd2LpHvdIzHagUrfNpcw4CRhwnFsc/4nW7Tb+lbx6Lhm1sMUzJT/Q2qCmFW0ZaF2tTu5lLjPjyfJsYbhQji2m6tfXWP4eW95l2cJoaa62XH+/PlYxys5si30n3LbMndxEnfHsByIXD63rPzk1d3IT9RajmWP/iYMtjg5op6bSvxVs0eBMyfc9fp+aTqrp5EDrau0H+8JWhRDXkRgdAXZ72AoN/ZnY3MlN5j+E9DCDHgUxxx76SMze0lxtVLnMndzkMBJjHs70gYRDzVFXJuwDaVdoO47vYpSvqZl5n17XLaw+5/rP2T9BgS0anJ+J9Tz6ZXW8baB1tTrezlycVSGEmPLhpqt8xtN7yrOFENP1rukKm3EdzLSF2dJSbcZlQP+hHfrf8uJYyOWy2xjtbDp3klFzLt8d0QcqrvduZuqw91U+q8/FLtG9gi0anN+3PPfw8oHW1ep4G3PxUMUCewBWBlZbQNDAlnLpSfyFy+K6aUaJ089cqTZbbvt7DAIE3+XXHGrEhccwgOCoC1sAqAmwBQBeYAsAvMAWAHiBLQDwIpEtyOUDyZHFFuTygfxIYYt7Lh8ASZDIFnsuHwCpkMgW9zW1ApOYAEeksIU4XLe823W/vtSqI7AFOCKLLYSVy1fnz2jLiS7XR4qx5tVlz1ZvbWUJ7qdMU9FHbMJe4IkUtjjl8tWZQW3pefSrzlu7z0xvtLKdM5jBfYcJUAGQxJaqcvmEEPbk7pY7km1r2MF9+3zFuK0ZFJHClqpy+W6ztmsS0eVOreGdqtS+ExBRpLClqly+w8z0CpXUT6RYa9jBfdNIzLYJiDRS2FJdLp89a7sxzjKPqzw+CjBPLc/YBEQYKWzxM5cPQGBIYQupKpcPQI2QxRYA5Ae2AMALbAGAF9gCAC+wBQBeYAsAvEhkC3L5QHJksQW5fCA/UthSXXbS4SYuh4nyAKgYiWypNJcPW0CNkGL+lkDOLQD4jRRzg5GqcvmwBdSIwG3J5XKe805qVJrL12yx3VxvSJRKaDPsYYIXUB21mNM4n8+7z2lcbS4/bkmxWAL2qYT+Pi5mQBXUwhZCyPT0dEdHx9wce7606nL5lpGYEZY0nVtcZ2YFgIda2FIoFNzPLVXl8mELqBWB2zI7O+t53VJVLp9K4xNzNB+2AH+R4jOx6nP5iYQtQQ9bgN9I8X0LcvkgFEjxXT5BLh+EAVlsAUB+YAsAvMAWAHiBLQDwAlsA4AW2AMCLRLYglw8kRxZbkMsH8iOFLdVlJ1MJ48Yw7a4W5MNAIEhkS6W5fNgCaoQU94n5c24xgC0gEKS4B5lUlcuHLaBG1EEunx6J0XNHcs6cBwAvdZDLZ9vimtQHoBLqIJfvdG7RG5gmMcZTX0DF1EEun98W4yWcARVQB7l8h5EYK6mv2FLIAPAjxWdi1eXyHc4t9qR+aSiGi3xQGVJ834JcPggFUnyXT5DLB2FAFlsAkB/YAgAvsAUAXmALALzAFgB4gS0A8CKRLcjlA8mRxRbk8oH8SGFLddlJAGqERLZUmssHoEZIZIv7GgCEUyNbhoeHk8mkS4MqcvkA1Iha2DI0NNTQ0LBixQr3ZpXm8qkUfjHiZdyYT8+gh5v1QZUEboumSnNzs4st1eXyzSl86yyTlvmNAaicYG3RVdmwYYP7uSV39uVsX1Pu7MuEkDJz+WYVjPMKfXpBIh/4QIC20Kp42pLtayKff5jtayKElJnLt9niKAUS+aAqArQlmUyuoNi+fbtTy9zITjXdvn5lTE2350aeJYSUk8u3DLP0ByJpL5DIB74hxSfI2b4m3Zbi6aWMXL5NANYVPRL5oHrE25I93FYY2aim2z/Y16im2wvDG68cRi4fyIgEtvQ13bvUWTi1Zf3KWOHUlnsXO7N9TcjlAwkRb8tY16o/Tu2ZTytHdj08n1bIlT1jXatEdwoABuJtuXa6d6xrFb1cO90rulMAMBBvCwBhAbYAwAtsAYAX2AIAL7AFAF5gCwC8wJYSbrdjVo/T/Wn2KWZd4OiiZxNjnnRQNvVgix7o1zL9FQJbgBeS2sI58QshZODx+1xelkFEbAFVIKktnJOKvdt1vzqzV53ZO59WZsaTkyNt6cHNdJq/jEA/bAFeyGtLLpfznLDyRNcaPbvPXFwD/cSatCzWmS3ob4sAUDVJxWn0tYzIALVP03raFsbjBGy9jStKwrIL79+Cbo6ATxXIawshJJ/Pu0+GfGLbGj27z1xcA/2W3Jipzqh3MkqiVLylLYySSyXi8bi2XUkWRnvrPo31ui2sxwmwOkztTz8sx2+ht4ItVSC1LYSQ6enpjo6Oubk5ZrO3tq1RJ3v1pbxAv2XQYrxkFJT1bFFqkkrElUwqEVcyJKPEjd3Zzi5Ok5KXbHF7nIB+vrAYVWrC9VvggR4+ILUthULB/dwy0NqgphVtGWhdXV6gn7POMko8Zn9HK1bKk1RJFsf2XrZ4X2/AFsHIa8vs7KzndUvf4/dpqf2B1tX2KL9XoJ8ew7BrvNiqVI4ZJU6P/+PxuH6m0cdjDu3pTekX9EjM9jgBRodttrj+FowjwpYqkNcWns/Eeh79sjreNtC62pLj5wv0m6+rFbe/ysVGiUScVfLmLzGY7TNKPJZI2B8OQF3lez8gkGmL629hPyJsqQJJbeH8vuW5h5cPtK6mQ/wI9JeAFv4jqS38WBL8CPSXgC3+E3pbgAOwxX9gCwC8wBYAeIEtAPACWwDgBbYAwAtsAYAX2AIAL7ClRDjSYA77QLq4JtSDLVHK5cMWkYTelojl8iuyBfhEuG2JXi4ftogk3LZEL5fPaIwsfs0IuS2Ry+Uzo2PI4teIcNsSvVw+K5aMdHGtCLct0cvlwxaRhNuW6OXy7Y2Rxa8d4bYlerl8+poEWfxaE25bkMs3Ay2CJdy2EOTyTcCWYAm9LYACtgQLbAGAF9gCAC+wBQBeYAsAvMAWAHiBLQDwAlsA4AW2lAhBGqxMkED2m3qwJTK5/DKBLX4jqS2c87eQaOXyywQJZL+R1BbOucEilssvE9jiN/LaksvlPOedjF4uP66kijvXopu29sjrB4i8thBC8vm8+5zG0cvlU6FjRooZef1gkdoWQsj09HRHR8fc3ByzWfRy+XFKRNvPSCAHjNS2FAoF93NL9HL5sEUk8toyOzvred0SvVy+qy3I6weMvLbwfCYWvVy+uy3I6weLpLZwft+CXD4f0MIfJLWFH+TyOYAt/hB6WwAHsMUfYAsAvMAWAHiBLQDwAlsA4AW2AMALbAGAF9gCAC+wpUQo02AcnUbe2D/qwZYI5/JhS02R1Bbk8vnwwxbAjaS2IJfPB2ypKfLagly+BToiUDpqKqHdmW+90R/p/ECQ1xaCXD6rx3ElQ7VNJUxZZnsmDOl8P5HaFoJcvvVko61hZsJKHUDeODCktgW5fBuwRSTy2oJcPrPHcSVDfeTLsgXp/MCQ1xbk8hmdtdY90xak84NCUluQyw8AaFEtktrCD3L53MCWagm9LYAb2FItsAUAXmALALzAFgB4gS0A8AJbAOAFtgDAC2wBgBfYUiKUaTDmDpE9Dop6sCXCuXzmDmFLUEhqC3L5lYLscYBIagty+ZUCWwJEXluQy7dgz+UjqV9j5LWFIJfP6rE5l4+kfk2R2haCXL71ZGNJGtvXIHscIFLbgly+DdgiEnltQS6f2WNzLh9J/Zoiry3I5TM6a65yJPVrjKS2IJdfE6BFeUhqCz/I5VcBbCmP0NsCqgC2lAdsAYAX2AIAL7AFAF5gCwC8wBYAeIEtAPACWwDgJcq2+J7EAnVOPdhSaS4ftoDyCL0tVeTyA7UFX5PXIbLbMjw8nEwmnd6tLpcPW0B5SG3L0NBQQ0PDihUrnBpUl8t3uVve/IwgS47X5f724s9UMzwvoo6Q1xZNlebmZjdbqs3ll8In9iS9Ofuup4FNCtmzU45hSVAPBGNLLIYFS1CLOGALlrAt4gjSlkpJJpMrKLZv3+7UMjeyU023r18ZU9PtuZFnCSFl5vKtgy5rUD2eSMTpB0SwLmaoaxxLEB8jMZ+BLdWQ7WvSbcn2NRFCysnlU9ctzOS91Q/Cvsqntqc3L67EVb6PwJaKyR5uK4xsVNPtH+xrVNPtheGNVw77nMvHM1DlArZUTLav6d6lzsKpLetXxgqntty72Jnta/Izl4/BlGzAlooZ61r1x6k982nlyK6H59MKubJnrGuVXzvXhlxwRS5gS8VcO9071rWKXq6d7g36oEAksAUAXkTXFWwB4UF0XUXLlkugJgT1/090XUXOlkUQMLCl3L2GwJYLY//2H7/ZY1+mL70nsNTqANhS7l5DYMt7Q3s/yV64cWOOXj4dH7h0pDPz+0GB1RZ2YEu5ew2BLWfe+WVu+vLi3SXTkj4+98aWqdQ/Z8+/42cFne9eG1vbfb7Mt3wnwGMNtsRatL8xsKXcvYbAltFj+6anJxfuLJmWi+/eOtExf/in2bf+Of3+sG+1BFt8QXRdRdeWE0d7rl3L3lKXTMv0hLZc+3js7KnXqyug891rSxUUSHupgC2V7zUEtrx9+MDk1Ss3Fu/OLy79YOc36GV+cenytSu/Hf5VdQUEW/xGdF1F15Y333zlD1emNFXoNpotf7iSHRlyrtzz3WtLN+5T9T3YUlq5trtb/zm2tvt8UQTTSKj4ovjWINW+pYUeMA22sEZPgy2xtd2DxW60DBoHN9raO2n4ONhC9dGy+/Pda/UtBlv0vbsfDrZUvtcQ2HJo8GB68oqmyvzikraQki0Tk1fePnHY0ZWWUn2Vqkn7yVx21LlC/9Eo/dIqoxXVnjLEKEOrLaXjaYVr3QerkyZb6E2sOhaPb3TD83CwpfK9hsCWvoFDH14s2vLJDVVbCCE/2PmNT26oFy5eeevtIw62lOqE/sPNOAOwbNHb6WuYthi7c5DFdDynn22dtHej2Mp+8tKc8DwEo5+wpdy9hsCWnkMD7/1hSrNl8lNVWwghP9j5jclP1XMXp944esxFFMsZgtuWYkOjQtm2FEvY+VLGq3yZnYQtVR4/mL2GwJZf9v/6dxNTl+dU+3XL5Tn1dxNTrwjKlnQAAAisSURBVKfeZttCVQs1xDfGZIuLg92m04dZhPPda9e2tKyld8GwxdqsXFuYnXS3hRqS6UqbV8CWQPYaAlt2HXzjt+mpibw6kV/UPw0jhPxg5zcm8otj6St9b51g20INcNa2tJg0sF9Um67yqXamV7b2pUp0/nbEs3xZneSzhTqu3lXYQkiUbXmu761TH019PLtwYXYhnV/4z9mFdH7ho/zihdmF8/nFkx9PvfKGky01gv1hmPTAlnL3GgJbkq8ceW30o9+cv/qb81eHLhiLtmZg9MLLg/59l18BptMR9fmy9WNr6YAt5e41BLa8ODD8zP6jv9h/NHngaNcB7b/Hug4cSx44+sz+o8/sT7167LSogqM/pA0dsKXcvYbAFhAQsKXcvcKW6AJbyt2rvLaAGhDU/z/RdRUtW0C4EV1XsAWEB9F1FV1bXHL5orsGHBBdV9G1xT2XL7p3gIXouoquLZ65fOdNQ/048TDPey66rqJrC08u32FT2CII0XUVXVt4cvkOm5ZrC3seV0HAliqOH8xeQ2ALTy7fYVPYIgjRdRVdW3hy+Q6bahVvzKpHVZ99qj1qTTweN37W5hxjTs2XSsTiSqo4PV8iZbSyTFRGz5JZmpDcc1vYUsXxg9lrCGzhyeU7bKpNKVmquVKdMqZxZczYSv/s1D6V0KubnnWJdVoqzvVnTPnnuS1sqeL4wew1BLbw5PIdNrWUbemldZZKvZmDLY7t6TecftbRnPBsr/8MW6o4fjB7DYEtPLl8h035bTHmCOezRS9o2MJCdF1F1xaeXL7DpvT1Av3CNrIqvuAeiRmjKdeKzyhxc1PbCudtYUs1xw9mryGwhSeX77BpRonHEgnWRT77qr14oWOUOs9VPoctlG26s7AlyOMHs9cQ2MKTyxfdR2BGdF1F1xaeXL7oPgIzousqurbw5PJF9xGYEV1X0bUFhA/RdQVbQHgQXVewBYQH0XUFW0B4EF1XsAWEB9F1FV1bkMsPH6LrKrq2IJcfPkTXVXRtqSKX74nYyFeY721xR3RdRdeWKnL5nrjYot8YZr2bWL8DuWpgS2DHD2avIbAlyFy+UwPzvcLm25gZAlUIbAns+MHsNQS2BJnLd2hgWm3KisWVDDO8UhGwJbDjB7PXENhSaS6fztnrWS/LPfcOwX1zGVv0YNoSueS9O6LrKrq2VJnLN8RIUBESKgVvD+5bzjg8thjrI5K8d0d0XUXXltzZl7N9TbmzL5Nqc/n2s4tzFLl8W6KVJXZHdF1F15ZsXxP5/MNsXxOpJpefUeKm/KKXLYYQVuVgizei6yqituRGdqrp9vUrY2q6PTfyLP0WZy7f/iQK6hrDKbjv8ggLu0qRTN67I7quImpLtq9Jt0U7vZSTy6ez9cYoLJ5ImM4tzOC+0dzhyWBGs0gm790RXVdRtCV7uK0wslFNt3+wr1FNtxeGN1453IZcfggQXVeRtKWv6d6lzsKpLetXxgqntty72Jnta0IuPwSIrqso2jLWteqPU3vm08qRXQ/PpxVyZc9Y1yrk8kOA6LqKoi3XTveOda2il2une0V3CnAguq6iaAsIK6LrCraA8CC6rmALCA+i6wq2gPAguq6iawty+eFDdF1F1xbk8sOH6LqKri3I5YcP0XUVXVskyuUbsTFf0pOwJbDjB7PXENgiTS4/laBvjPSh0GFLYMcPZq8hsEWaXD6NL+F82BLY8YPZawhskS2XX9q3qdCRyzchuq6ia4tsuXxzhIxYmyGXT8TXVXRt6Rs49OHFoi3Cc/l0YNkGksYlRNdVdG3pOTTw3h+mNFvE5vK9ru1hSwnRdRVdW37Z/+vfTUxdnlPt1y01zeUzr/aRy2ciuq6ia8uug2/8Nj01kVcn8ov6p2Gk9rl86lMD4w3k8pmIrqvo2vJc31unPpr6eHbhwuxCOr+AXH4IEF1X0bUl+cqR10Y/0lL4eigfuXypEV1X0bXlxYHhZ/Yf/cX+o8kDR7sOHEUuPwSIrqvo2gLCh+i6gi0gPIiuK9gCwoPouoItIDyIrivYAsKD6LqKri3I5YcP0XUVXVuQyw8fousqurYglx8+RNdVdG2RKJdvrPSlymFLYMcPZq8hsEWaXH5GiVvSkVUCWwI7fjB7DYEtMubyfYnlw5bgjh/MXkNgi4S5fPsa5PJNiK6r6NoiUS4/Q5W+DeTyDUTXVXRtkSqXr69hjcSQNC4huq6ia4s8uXwK5oULbCkhuq6ia4tEuXy6pXEthFy+DdF1FV1bZMnlO35MgFy+DdF1FV1bkMsPH6LrKrq2IJcfPkTXVXRtQS4/fIiuq+jaAsKH6LqCLSA8iK4r2ALCg+i6gi0gPIiuK9gCwoPouoquLcjlhw/RdRVdW5DLDx+i6yq6tiCXHz5E11V0bZEpl2+85UN0ErYEd/xg9hoCW6TJ5VPvwRZ3RNdVdG2RK5dfumsZtrghuq6ia4tMufyiOcjleyC6rqJrizy5fH07p+QkcvlFRNdVdG2RJZdPKeLwgCQkjUuIrqvo2iJHLp8SzTLAM4AtJUTXVXRtkSWXT2F+ZhJy+TZE11V0bZEnl69jtwW5fBOi6yq6tiCXHz5E11V0bUEuP3yIrqvo2oJcfvgQXVfRtQWED9F1BVtAeBBdV7AFhAfRdQVbQHgQXVewBYQH0XUVXVuQyw8fousqurYglx8+RNdVdG0JMpcfEPV7SwsnousqurYEmcsPCNgCWwQRZC4/IGALbBFEkLn8gIAtsEUQvuXy6TXWh1TYovmEehuB+3IRXVfRtcWnXL75IWBe0XwaBO7LRnRdRdcWf3L51gik/pZD2NgEIsRlIrquomuLP7l8hi3Gc5Ngi8+Irqvo2uJPLt8+ErMGg80vELivBtF1FV1bfMrlE7erfHs0H4H7ahBdV9G1JeBcvtjH7NcpousqurYEnMuHLQEguq6ia0vAuXzYEgCi6ypIW7BgCWIRB2zBErZFHP8f5CeIkM3QYvQAAAAASUVORK5CYII=" alt="" />

主布局文件:

activity_main.xml    引入头，尾，中间区域是一个ViewPager

顶部与底部文件写固定高度，中间ViewPager占用剩余空间

<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:orientation="vertical" >

    <include layout="@layout/top" />

    <android.support.v4.view.ViewPager

        android:id="@+id/id_viewpager"

        android:layout_width="fill_parent"

        android:layout_height="0dp"

        android:layout_weight="1" >

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom" />

</LinearLayout>

top.xml

<?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="45dp"

    android:background="@drawable/title_bar"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="微信"

        android:textColor="#ffffff"

        android:textSize="20sp"

        android:textStyle="bold" />

</LinearLayout>

bottom.xml

<?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="55dp"

    android:background="@drawable/bottom_bar"

    android:orientation="horizontal" >

    <LinearLayout

        android:id="@+id/id_tab_weixin"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/id_tab_weixin_img"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

            android:src="@drawable/tab_weixin_pressed" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="微信"

            android:textColor="#ffffff" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/id_tab_frd"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/id_tab_frd_img"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

            android:src="@drawable/tab_find_frd_normal" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="朋友"

            android:textColor="#ffffff" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/id_tab_address"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/id_tab_address_img"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

            android:src="@drawable/tab_address_normal" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="通讯录"

            android:textColor="#ffffff" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/id_tab_settings"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/id_tab_settings_img"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

            android:src="@drawable/tab_settings_normal" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="设置"

            android:textColor="#ffffff" />

    </LinearLayout>

</LinearLayout>

tab01.xml

<?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:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:gravity="center"

        android:text="This is Weixin Tab"

        android:textSize="30sp"

        android:textStyle="bold" />

</LinearLayout>

tab02.xml

<?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:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:gravity="center"

        android:text="This is Frd Tab"

        android:textSize="30sp"

        android:textStyle="bold" />

</LinearLayout>

tab03.xml

<?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:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:gravity="center"

        android:text="This is Address Tab"

        android:textSize="30sp"

        android:textStyle="bold" />

</LinearLayout>

tab04.xml

<?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:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:gravity="center"

        android:text="This is Settings Tab"

        android:textSize="30sp"

        android:textStyle="bold" />

</LinearLayout>

MainActivity.java

package com.imooc.tab01;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.Window;

import android.widget.ImageButton;

import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener

{

    private ViewPager mViewPager;

    private PagerAdapter mAdapter;

    private List<View> mViews = new ArrayList<View>();

    // TAB

    private LinearLayout mTabWeixin;

    private LinearLayout mTabFrd;

    private LinearLayout mTabAddress;

    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;

    private ImageButton mFrdImg;

    private ImageButton mAddressImg;

    private ImageButton mSettingImg;

    @Override

    protected void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);

        initView();

        initEvents();

    }

    private void initEvents()

    {

        mTabWeixin.setOnClickListener(this);

        mTabFrd.setOnClickListener(this);

        mTabAddress.setOnClickListener(this);

        mTabSetting.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new OnPageChangeListener()

        {

            @Override

            public void onPageSelected(int arg0)

            {

                int currentItem = mViewPager.getCurrentItem();

                resetImg();

                switch (currentItem)

                {

                case 0:

                    mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);

                    break;

                case 1:

                    mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);

                    break;

                case 2:

                    mAddressImg

                            .setImageResource(R.drawable.tab_address_pressed);

                    break;

                case 3:

                    mSettingImg

                            .setImageResource(R.drawable.tab_settings_pressed);

                    break;

                }

            }

            @Override

            public void onPageScrolled(int arg0, float arg1, int arg2)

            {

            }

            @Override

            public void onPageScrollStateChanged(int arg0)

            {

            }

        });

    }

    private void initView()

    {

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

        // tabs

        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);

        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);

        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);

        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);

        // ImageButton

        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);

        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);

        mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);

        mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);

        LayoutInflater mInflater = LayoutInflater.from(this);

        View tab01 = mInflater.inflate(R.layout.tab01, null);

        View tab02 = mInflater.inflate(R.layout.tab02, null);

        View tab03 = mInflater.inflate(R.layout.tab03, null);

        View tab04 = mInflater.inflate(R.layout.tab04, null);

        mViews.add(tab01);

        mViews.add(tab02);

        mViews.add(tab03);

        mViews.add(tab04);

        mAdapter = new PagerAdapter()

        {

            @Override

            public void destroyItem(ViewGroup container, int position,

                    Object object)

            {

                container.removeView(mViews.get(position));

            }

            @Override

            public Object instantiateItem(ViewGroup container, int position)

            {

                View view = mViews.get(position);

                container.addView(view);

                return view;

            }

            @Override

            public boolean isViewFromObject(View arg0, Object arg1)

            {

                return arg0 == arg1;

            }

            @Override

            public int getCount()

            {

                return mViews.size();

            }

        };

        mViewPager.setAdapter(mAdapter);

    }

    @Override

    public void onClick(View v)

    {

        resetImg();

        switch (v.getId())

        {

        case R.id.id_tab_weixin:

            mViewPager.setCurrentItem(0);

            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);

            break;

        case R.id.id_tab_frd:

            mViewPager.setCurrentItem(1);

            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);

            break;

        case R.id.id_tab_address:

            mViewPager.setCurrentItem(2);

            mAddressImg.setImageResource(R.drawable.tab_address_pressed);

            break;

        case R.id.id_tab_settings:

            mViewPager.setCurrentItem(3);

            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);

            break;

        default:

            break;

        }

    }

    /**

     * 将所有的图片切换为暗色的

     */

    private void resetImg()

    {

        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);

        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);

        mAddressImg.setImageResource(R.drawable.tab_address_normal);

        mSettingImg.setImageResource(R.drawable.tab_settings_normal);

    }

}

代码解释:

initView()首先初始化ViewPager，再初始化四个选项卡(四个布局LinearLayout)，再初始化四个中间的View并加到集合中。新建一适配器并添加到ViewPager。

然后为ViewPager添加滑动事件与给按钮添加点击事件。(事件添加在LinearLayout上面，button的clickAble设置为false)

　　点击按钮的时候每次查看点击的是哪个按钮，并每次都先将每个按钮都变为灰色，然后根据点击的id置为高亮。

　　滑动ViewPager的时候每次都先将每个按钮都变为灰色，再根据选项的序号判断处于第几个tab，给按钮设置对应的高亮。

最新文章

1. 如何使用DOS命令（cd命令）
2. AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4
3. 自定义表单验证$setValidaity
4. Java遇见HTML——JSP篇之商品浏览记录的实现
5. [SAP ABAP开发技术总结]DIALOG屏幕流逻辑
6. CentOS 6.5 安装 Nginx 1.7.8 教程
7. 【JAVA - SSM】之MyBatis开发DAO
8. python基础知识十一
9. ACM_2057
10. Topshelf创建Windows服务
11. redis的数据类型 （一） 字符串
12. root权限下找不到 /root/.ssh目录
13. 2712:细菌繁殖-poj
14. 团队-爬虫豆瓣top250项目-模块开发过程
15. CSDN也有我的博客啦
16. Find Minimum in Rotated Sorted Array I & II
17. 【58沈剑架构系列】为什么说要搞定微服务架构，先搞定RPC框架？
18. flume采集启动报错，权限不够
19. maven 配置多模块项目 pom modules
20. Intel酷睿前世今生（一）

热门文章

1. perl语言入门总结-第2章
2. selenium+PhantomJS 抓取淘宝搜索商品
3. 1 Mongodb安装
4. javaScript对SEO的影响
5. ElasticSearch学习笔记（四）-- 分布式
6. PJSIP-PJLIB-Socket
7. (原)C sharp杂谈记事(一)
8. Mybatis基本用法
9. 抓包工具 - Fiddler - （一）
10. gradle构建