基于Fragment实现Tab的切换,滑出侧边栏

最近在学习Fragment(碎片)这是android3.0以后提出的概念,很多pad上面的设置部分都是通过Fragment来实现的,先看看具体的效果吧
(图一)  (图二) (图三)
第一章图片是初始时的状态,第二章点击右上角设置或者向左划屏时的状态,第三章是按返回键或者向右划屏时的状态。
注:文章例子还存在一些小问题,比如在图二状态时点击设置选项没有反应,原因是因为他的位置区域并没有随着动画而改变。大家在实现动画的过程里面应该有碰到过类似的问题:比如你对一个textview做动画处理啊,把textview从位置A做translate移动到位置B,这个时候你点击A位置时textview仍有效,但你点击B位置时却无效,解决方案就是动画结束时你在调用layout(left,top,right,bottom)重新布局。文章例子中存在的问题也是一样的。如果有更好的解决方案,可以留言,方便大家一起学习。
我们看看实现的方式吧,底部的tab在脑海里第一反应便是android原生的tabhost,只需要做一些细微的调整就可以得到自己想要的效果。先看看布局文件,代码如下:

 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
<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@android:id/tabhost"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >



    <LinearLayout

        android:id="@+id/setting"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="@drawable/maintab_toolbar_bg" >



        <ListView

            android:id="@+id/list"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="@android:color/transparent"

            android:cacheColorHint="@android:color/transparent"

            android:dividerHeight="1dp"/>

    </LinearLayout>



    <LinearLayout

        android:id="@+id/main"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical" >



        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="45dp"

            android:background="@drawable/app_title_bar"

            android:gravity="center_vertical"

            android:orientation="horizontal" >



            <TextView

                android:layout_width="wrap_content"

                android:layout_height="fill_parent"

                android:layout_marginLeft="24dp"

                android:gravity="center_vertical"

                android:text="@string/app_name"

                android:textColor="@android:color/white"

                android:textSize="22dp" />



            <ImageButton

                android:id="@+id/btn_settings"

                android:layout_width="48dip"

                android:layout_height="match_parent"

                android:layout_alignParentRight="true"

                android:background="@android:color/transparent"

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



            <ImageView

                android:layout_width="1dp"

                android:layout_height="match_parent"

                android:layout_toLeftOf="@id/btn_settings"

                android:background="@drawable/app_title_bar_line" />

        </RelativeLayout>



        <FrameLayout

            android:id="@android:id/tabcontent"

            android:layout_width="0dp"

            android:layout_height="0dp"

            android:layout_weight="0" >

        </FrameLayout>



        <FrameLayout

            android:id="@+id/containertabcontent"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1" >

        </FrameLayout>



        <TabWidget

            android:id="@android:id/tabs"

            android:layout_width="match_parent"

            android:layout_height="55dip"

            android:layout_weight="0"

            android:orientation="horizontal" >

        </TabWidget>

    </LinearLayout>

</TabHost>

整个布局文件就是一个tabhost,然后setting部分是滑出的侧边栏,main是整个内容区域,在main里面的RelativeLayout是标题栏部分,除了containertabcontent以外其他的几个FrameLayout都是tabhost里面。
我们新建一个activity,命名为FragmentTabActivity,然后继承的不在平时我们继承的Activity而是FragmentActivity(需要导入android-surpport-v.jar包),代码如下:

  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

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300
private final static int TRANSLATE_ANIMATION_WIDTH = 150;

    private final static int ANIMATION_DURATION_FAST = 450;

    private final static int ANIMATION_DURATION_SLOW = 350;

    private final static int MOVE_DISTANCE = 50;



    private TabHost mTabHost;

    private TabManager mTabManager;

    private LinearLayout mSettingLinearLayout;

    private LinearLayout mMainLinearLayout;

    // 屏幕宽度

    private int mWidth;

    private float mPositionX;

    // 滑动状态

    private boolean mSlided = false;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);



        ActivityUtils.requestNotTitleBar(this);



        setContentView(R.layout.fragment_tabs);



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



        // 继承tabactivity.getTabHost()不需要setup()

        mTabHost = (TabHost) findViewById(android.R.id.tabhost);

        mTabHost.setup();



        mTabManager = new TabManager(this, mTabHost, R.id.containertabcontent);



        RelativeLayout app = (RelativeLayout) getLayoutInflater().inflate(

                R.layout.app_tab_layout, null);

        mTabManager.addTab(mTabHost.newTabSpec("Apps").setIndicator(app),

                AppsFragment.class, null);



        RelativeLayout contacts = (RelativeLayout) getLayoutInflater().inflate(

                R.layout.contacts_tab_layout, null);

        mTabManager.addTab(mTabHost.newTabSpec("Contact")

                .setIndicator(contacts), ContactsFragment.class, null);



        RelativeLayout message = (RelativeLayout) getLayoutInflater().inflate(

                R.layout.message_tab_layout, null);

        mTabManager.addTab(

                mTabHost.newTabSpec("Message").setIndicator(message),

                MessageFragment.class, null);



        mSettingLinearLayout = (LinearLayout) findViewById(R.id.setting);

        mMainLinearLayout = (LinearLayout) findViewById(R.id.main);

        mMainLinearLayout.setOnTouchListener(mOnTouchListener);

        slideIn();



        ListView listView = (ListView) findViewById(R.id.list);

        listView.setOnTouchListener(mOnTouchListener);

        findViewById(R.id.btn_settings).setOnClickListener(mOnClickListener);



        if (savedInstanceState != null) {

            mTabHost.setCurrentTabByTag(savedInstanceState.getString("tag"));

        }



        // 初始化listview

        final Resources res = getResources();

        String[] mTitles = res.getStringArray(R.array.setting_items);

        ArrayAdapter<String> mAdapter = new ArrayAdapter<String>(this,

                R.layout.fragment_setting_item, R.id.item, mTitles);

        listView.setAdapter(mAdapter);

    }



    // 点击按钮

    private OnClickListener mOnClickListener = new OnClickListener() {

        @Override

        public void onClick(View v) {

            switch (v.getId()) {

                case R.id.btn_settings :

                    if (mSlided) {

                        slideIn();

                    } else {

                        slideOut();

                    }

                    break;

            }

        }

    };



    // 滑动

    private OnTouchListener mOnTouchListener = new OnTouchListener() {

        @Override

        public boolean onTouch(View v, MotionEvent event) {

            if (v.getId() == R.id.main) {

                int action = event.getAction();

                switch (action) {

                    case MotionEvent.ACTION_DOWN :

                        mPositionX = event.getX();

                        break;

                    case MotionEvent.ACTION_MOVE :

                        final float currentX = event.getX();

                        // 向左边滑动

                        if (currentX - mPositionX <= -MOVE_DISTANCE && !mSlided) {

                            slideOut();

                        } else if (currentX - mPositionX >= MOVE_DISTANCE && mSlided) {

                            slideIn();

                        }

                        break;

                }

                return true;

            } 

            return false;

        }

    };



    /**

     * 滑出侧边栏

     */

    private void slideOut() {

        TranslateAnimation translate = new TranslateAnimation(mWidth,

                TRANSLATE_ANIMATION_WIDTH, 0, 0);

        translate.setDuration(ANIMATION_DURATION_SLOW);

        translate.setFillAfter(true);

        mSettingLinearLayout.startAnimation(translate);

        mSettingLinearLayout.getAnimation().setAnimationListener(

                new Animation.AnimationListener() {



                    @Override

                    public void onAnimationStart(Animation anim) {



                    }



                    @Override

                    public void onAnimationRepeat(Animation animation) {



                    }



                    @Override

                    public void onAnimationEnd(Animation anima) {

                        TranslateAnimation animation = new TranslateAnimation(

                                0, TRANSLATE_ANIMATION_WIDTH - mWidth, 0, 0);

                        animation.setDuration(ANIMATION_DURATION_FAST);

                        animation.setFillAfter(true);

                        mMainLinearLayout.startAnimation(animation);

                        mSlided = true;

                    }

                });

    }



    /**

     * 滑进侧边栏

     */

    private void slideIn() {

        TranslateAnimation translate = new TranslateAnimation(TRANSLATE_ANIMATION_WIDTH,

                mWidth, 0, 0);

        translate.setDuration(ANIMATION_DURATION_FAST);

        // 动画完成时停在结束位置

        translate.setFillAfter(true);

        mSettingLinearLayout.startAnimation(translate);

        mSettingLinearLayout.getAnimation().setAnimationListener(

                new Animation.AnimationListener() {



                    @Override

                    public void onAnimationStart(Animation animation) {

                        TranslateAnimation mainAnimation = new TranslateAnimation(

                                -mWidth + TRANSLATE_ANIMATION_WIDTH, 0, 0, 0);

                        mainAnimation.setDuration(ANIMATION_DURATION_SLOW);

                        mainAnimation.setFillAfter(true);

                        mMainLinearLayout.startAnimation(mainAnimation);

                    }



                    @Override

                    public void onAnimationRepeat(Animation animation) {



                    }



                    @Override

                    public void onAnimationEnd(Animation animation) {

                        mSlided = false;

                    }

                });



    }



    @Override

    public boolean onContextItemSelected(MenuItem item) {

        if (mSlided) {

            slideIn();

        } else {

            slideOut();

        }

        return true;

    }



    @Override

    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if (keyCode == KeyEvent.KEYCODE_BACK && mSlided) {

            slideIn();

            return true;

        }

        return super.onKeyDown(keyCode, event);

    }



    /**

     * 销毁之前

     */

    @Override

    protected void onSaveInstanceState(Bundle outState) {

        super.onSaveInstanceState(outState);

        outState.putString("tag", mTabHost.getCurrentTabTag());

    }



    public static class TabManager implements TabHost.OnTabChangeListener {

        private final FragmentTabActivity mActivity;

        // 保存tab

        private final Map<String, TabInfo> mTabs = new HashMap<String, FragmentTabActivity.TabManager.TabInfo>();

        private final TabHost mTabHost;

        private final int mContainerID;

        private TabInfo mLastTab;



        public TabManager(FragmentTabActivity activity, TabHost tabHost,

                int containerID) {

            mActivity = activity;

            mTabHost = tabHost;

            mContainerID = containerID;

            mTabHost.setOnTabChangedListener(this);

        }



        static final class TabInfo {

            private final String tag;

            private final Class<?> clss;

            private final Bundle args;

            private Fragment fragment;



            TabInfo(String _tag, Class<?> _clss, Bundle _args) {

                tag = _tag;

                clss = _clss;

                args = _args;

            }

        }



        static class TabFactory implements TabHost.TabContentFactory {

            private Context mContext;

            TabFactory(Context context) {

                mContext = context;

            }



            @Override

            public View createTabContent(String tag) {

                View v = new View(mContext);

                v.setMinimumHeight(0);

                v.setMinimumWidth(0);

                return v;

            }

        }



        // 加入tab

        public void addTab(TabHost.TabSpec tabSpec, Class<?> clss, Bundle args) {

            tabSpec.setContent(new TabFactory(mActivity));

            String tag = tabSpec.getTag();



            TabInfo info = new TabInfo(tag, clss, args);

            final FragmentManager fm = mActivity.getSupportFragmentManager();

            info.fragment = fm.findFragmentByTag(tag);

            // isDetached分离状态

            if (info.fragment != null && !info.fragment.isDetached()) {

                FragmentTransaction ft = fm.beginTransaction();

                ft.detach(info.fragment);

                ft.commit();

            }

            mTabs.put(tag, info);

            mTabHost.addTab(tabSpec);

        }



        @Override

        public void onTabChanged(String tabId) {

            TabInfo newTab = mTabs.get(tabId);

            if (mLastTab != newTab) {

                FragmentManager fragmentManager = mActivity

                        .getSupportFragmentManager();

                FragmentTransaction fragmentTransaction = fragmentManager

                        .beginTransaction();

                // 脱离之前的tab

                if (mLastTab != null && mLastTab.fragment != null) {

                    fragmentTransaction.detach(mLastTab.fragment);

                }

                if (newTab != null) {

                    if (newTab.fragment == null) {

                        newTab.fragment = Fragment.instantiate(mActivity,

                                newTab.clss.getName(), newTab.args);

                        fragmentTransaction.add(mContainerID, newTab.fragment,

                                newTab.tag);

                    } else {

                        // 激活

                        fragmentTransaction.attach(newTab.fragment);

                    }

                }

                mLastTab = newTab;

                fragmentTransaction.commit();

                // 会在进程的主线程中,用异步的方式来执行,如果想要立即执行这个等待中的操作,就要调用这个方法

                // 所有的回调和相关的行为都会在这个调用中被执行完成,因此要仔细确认这个方法的调用位置。

                fragmentManager.executePendingTransactions();

            }

        }

    }

先看看内部类TabManager,封装了TabHost的addTab动作,其中addTabaddTab(TabHost.TabSpec tabSpec, Class<?> clss, Bundle args)方法第一个参数是tabhost.tabspec,第二个参数是fragment,第三个是你要从FragmentTabActivity里传递到相关fragment的参数。

1

2

3

4

5

6
// isDetached分离状态

if (info.fragment != null && !info.fragment.isDetached()) {

    FragmentTransaction ft = fm.beginTransaction();

    ft.detach(info.fragment);

    ft.commit();

}

这段代码是设置每个tab的fragment,把fragment从UI中detach, 一个 Fragment 除了可以被 FragmentTransaction remove 删除,以及hide 隐藏外,还可以被detach 。detach 的好处就是在 remove 和 hide 之间 ,当一个fragment 被detach 后,他本身的状态虽然还保持住,但是它的view 却被avtivity 的ViewTree丢弃掉,下次atach 的时候 ,还会调用onCreateView 重新创建视图,注意此时 onattach 不会被调用,它只会第一次被调用。onTabChanged(String tabId)是对TabHost.OnTabChangeListener接口的实现```Java
@Override
public void onTabChanged(String tabId) {
TabInfo newTab = mTabs.get(tabId);
if (mLastTab != newTab) {
FragmentManager fragmentManager = mActivity
.getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager
.beginTransaction();
// 脱离之前的tab
if (mLastTab != null && mLastTab.fragment != null) {
fragmentTransaction.detach(mLastTab.fragment);
}
if (newTab != null) {
if (newTab.fragment == null) {
newTab.fragment = Fragment.instantiate(mActivity,
newTab.clss.getName(), newTab.args);
fragmentTransaction.add(mContainerID, newTab.fragment,
newTab.tag);
} else {
// 激活
fragmentTransaction.attach(newTab.fragment);
}
}
mLastTab = newTab;
fragmentTransaction.commit();
// 会在进程的主线程中,用异步的方式来执行,如果想要立即执行这个等待中的操作,就要调用这个方法
// 所有的回调和相关的行为都会在这个调用中被执行完成,因此要仔细确认这个方法的调用位置。
fragmentManager.executePendingTransactions();
}
}

 1

 2

 3

 4

 5

 6

 7

 8

 9

10

11

12

13

14

15

16

17

18

19

20

21

22
在你切换tab时,需要先把上一个fragment从viewtree中脱离出来,然后再激活当前的fragment。需要考虑newTab.fragment是否已经生成过,如果生成过直接使用就旧的,旧的会被fragmentTransactioon.attach(newTab.fragment),如果没有则通过Fragment.instantiate()方法生成一个新的,并且通过fragmentTransaction.add,然后再通过fragmentTransaction来commit。

最后只需要在oncreate方法中做: 





```Java

mTabManager = new TabManager(this, mTabHost, R.id.containertabcontent);



        RelativeLayout app = (RelativeLayout) getLayoutInflater().inflate(

                R.layout.app_tab_layout, null);

        mTabManager.addTab(mTabHost.newTabSpec("Apps").setIndicator(app),

                AppsFragment.class, null);



        RelativeLayout contacts = (RelativeLayout) getLayoutInflater().inflate(

                R.layout.contacts_tab_layout, null);

        mTabManager.addTab(mTabHost.newTabSpec("Contact")

                .setIndicator(contacts), ContactsFragment.class, null);



        RelativeLayout message = (RelativeLayout) getLayoutInflater().inflate(

                R.layout.message_tab_layout, null);

        mTabManager.addTab(

                mTabHost.newTabSpec("Message").setIndicator(message),

                MessageFragment.class, null);

就Ok了tab的切换。
接下来是实现侧边栏的滑出,向左边划屏的时候侧边栏显示,向右边划屏出的时候侧边栏隐藏,我们对setting部分作了translate平移,代码如下:

 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
/**

     * 滑出侧边栏

     */

    private void slideOut() {

        TranslateAnimation translate = new TranslateAnimation(mWidth,

                TRANSLATE_ANIMATION_WIDTH, 0, 0);

        translate.setDuration(ANIMATION_DURATION_SLOW);

        translate.setFillAfter(true);

        mSettingLinearLayout.startAnimation(translate);

        mSettingLinearLayout.getAnimation().setAnimationListener(

                new Animation.AnimationListener() {



                    @Override

                    public void onAnimationStart(Animation anim) {



                    }



                    @Override

                    public void onAnimationRepeat(Animation animation) {



                    }



                    @Override

                    public void onAnimationEnd(Animation anima) {

                        TranslateAnimation animation = new TranslateAnimation(

                                0, TRANSLATE_ANIMATION_WIDTH - mWidth, 0, 0);

                        animation.setDuration(ANIMATION_DURATION_FAST);

                        animation.setFillAfter(true);

                        mMainLinearLayout.startAnimation(animation);

                        mSlided = true;

                    }

                });

    }

向右边划屏时也是作了translate平移,代码如下:

 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
/**

     * 滑进侧边栏

     */

    private void slideIn() {

        TranslateAnimation translate = new TranslateAnimation(TRANSLATE_ANIMATION_WIDTH,

                mWidth, 0, 0);

        translate.setDuration(ANIMATION_DURATION_FAST);

        // 动画完成时停在结束位置

        translate.setFillAfter(true);

        mSettingLinearLayout.startAnimation(translate);

        mSettingLinearLayout.getAnimation().setAnimationListener(

                new Animation.AnimationListener() {



                    @Override

                    public void onAnimationStart(Animation animation) {

                        TranslateAnimation mainAnimation = new TranslateAnimation(

                                -mWidth + TRANSLATE_ANIMATION_WIDTH, 0, 0, 0);

                        mainAnimation.setDuration(ANIMATION_DURATION_SLOW);

                        mainAnimation.setFillAfter(true);

                        mMainLinearLayout.startAnimation(mainAnimation);

                    }



                    @Override

                    public void onAnimationRepeat(Animation animation) {



                    }



                    @Override

                    public void onAnimationEnd(Animation animation) {

                        mSlided = false;

                    }

                });



    }

后来为了侧边栏滑出不会过于的生硬,所以就给main部分也加上了translate平移。所以监听了setting的动画,在setting部分动画结束时和开始时执行main的平移。
最后通过监听main的onTouchListener事件来实现侧边栏的出现和隐藏
里面的move_distance是常量,为了避免你点击屏幕就会触发事件。

你可能感兴趣的:(Fragment)