Android pri (24)

Android Basics: Multiscreen Apps

Lesson 5: Fragments

Up Button

  • up button就是放在最上面的(导航栏那边的)返回键啊之类的。
  • up button和手机自带的回退键有什么区别呢? 回退键是返回到你上一步的地方(比如说你先打开了一个app,然后你收到了一封邮件,然后你打开了它,然后你再摁回退键,这个时候你就会返回到app中去,而不是电子邮件app的主列表去)。但是如果你摁的是电子邮件app中自带的up button的话,那么你就会返回到电子邮件的主列表中去,也就是返回上一级。
  • 那么怎样往app中加返回键呢?参考
  • Markdown
  • 主要就是这样,告诉它返回到哪一个parent activity就好了,然后如果有版本问题的话,就加入下面那个meta-data那段话。
  • 效果如图:(左上角会自动带有一个返回的小箭头)
  • Markdown

ViewPager

  • 如果你要实现能够用手左划一下,右划一下的效果的话,那么我们这里用了ViewPager + FragmentPagerAdapter,然后又因为我们要使用自定义的adapter来展示我们自己的fragment,所以我们就重新写了一个Adapter的类,使它继承了FragmentPagerAdapter,然后我们可以在其中自定义自己的方法。
  • 可以参考这里的项目的写法

Fragment

  • A Fragment is a Java class. You create your own Fragment, just like you created your own activities. You subclass the Fragment class in the Android framework.(将FragmentPagerAdapter给子例化)。
  • Fragment的一些简单介绍

修改App的外貌

  • 这里我们将app修改成为那种上面一个Tab,然后进行的是分屏滑动的这样子的。
  • 其实改成新的样式只需要修改几个地方。
  • 首先,如果你要将app加上ViewPager和TabLayout的话,那么要修改一下activity_main.xml,然后TabLayout是因为它是使用Library库中的内容,所以要在build.gradle的dependencies中加上“compile ‘com.android.support:design:23.3.0’”, design后面的是要根据你自己的minSDK version来进行修改的。
  • activity_main.xml

    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
    <?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2016 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->
    <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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/primary_color"
    android:orientation="vertical"
    tools:context="com.example.android.miwok.MainActivity">
    <android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabTextColor="#A8A19E"
    app:tabSelectedTextColor="#FFFFFF"
    app:tabIndicatorColor="#FFFFFF"
    app:tabBackground="@color/primary_color"
    app:tabMode="fixed" />
    <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
    </LinearLayout>
  • 然后我们要自定义FragmentPager的适配器,这里我们可以定义当你滑到哪个Tab是显示哪个Fragment。

  • MyFragmentPagerAdapter.java

    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
    package com.example.android.miwok;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    /**
    * Provides the appropriate {@link Fragment} for a view pager.
    */
    public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private String tabTitles[] = new String[] { "NUMBER", "FAMILY", "COLORS", "PHRASES" };
    public MyFragmentPagerAdapter(FragmentManager fm) {
    super(fm);
    }
    @Override
    public Fragment getItem(int position) {
    if(position == 0){
    return new NumbersFragment();
    }else if(position == 1){
    return new FamilyFragment();
    }else if(position == 2){
    return new ColorsFragment();
    }else{
    return new PhrasesFragment();
    }
    }
    @Override
    public int getCount() {
    return 4;
    }
    @Override
    public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    return tabTitles[position];
    }
    }
  • 然后我们就可以在MainActivity.java中使用它们了。

  • MainActivity.java

    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
    package com.example.android.miwok;
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the content of the activity to use the activity_main.xml layout file
    setContentView(R.layout.activity_main);
    ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
    MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(myFragmentPagerAdapter);
    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);
    }
    }
  • ColorsFragment.java

    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
    package com.example.android.miwok;
    import android.media.MediaPlayer;
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.ListView;
    import java.util.ArrayList;
    /**
    * A simple {@link Fragment} subclass.
    */
    public class ColorsFragment extends Fragment {
    private MediaPlayer mediaPlayer;
    private MediaPlayer.OnCompletionListener mCompletionListener = new MediaPlayer.OnCompletionListener() {
    @Override
    public void onCompletion(MediaPlayer mediaPlayer) {
    releaseMediaPlayer();
    }
    };
    public ColorsFragment() {
    // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.word_list, container, false);
    ArrayList<Word> words = new ArrayList<Word>();
    words.add(new Word("red", "weṭeṭṭi", R.drawable.color_red, R.raw.color_red));
    words.add(new Word("green", "chokokki", R.drawable.color_green, R.raw.color_green));
    words.add(new Word("brown", "ṭakaakki", R.drawable.color_brown, R.raw.color_brown));
    words.add(new Word("gray", "ṭopoppi", R.drawable.color_gray, R.raw.color_gray));
    words.add(new Word("black", "kululli", R.drawable.color_black, R.raw.color_black));
    words.add(new Word("white", "kelelli", R.drawable.color_white, R.raw.color_white));
    words.add(new Word("dusty yellow", "ṭopiisә", R.drawable.color_dusty_yellow, R.raw.color_dusty_yellow));
    words.add(new Word("mustard yellow", "chiwiiṭә", R.drawable.color_mustard_yellow, R.raw.color_mustard_yellow));
    WordAdapter wordAdapter = new WordAdapter(getActivity(), words, R.color.category_colors);
    ListView listView = (ListView) rootView.findViewById(R.id.list);
    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
    releaseMediaPlayer();
    Word word = (Word) adapterView.getItemAtPosition(i);
    int songResourceID = word.getSongResourceID();
    mediaPlayer = MediaPlayer.create(getActivity(), songResourceID);
    mediaPlayer.start();
    mediaPlayer.setOnCompletionListener(mCompletionListener);
    }
    });
    listView.setAdapter(wordAdapter);
    return rootView;
    }
    @Override
    public void onStop() {
    super.onStop();
    Log.v("TAG", "当前调用的onStop方法!");
    releaseMediaPlayer();
    }
    private void releaseMediaPlayer() {
    // If the media player is not null, then it may be currently playing a sound.
    if (mediaPlayer != null) {
    mediaPlayer.release();
    mediaPlayer = null;
    }
    }
    }
  • 具体的效果就像是这样的。

  • Markdown

热评文章