Android project development practices: Using Fragment and FragmentTabHost to build the bottom menu (1)

Android project development practices: Using Fragment and FragmentTabHost to build the bottom menu (1)

Learning is practical. Only by integrating what you have learned into our development, and using it with ease can you truly grasp it. However, it is not easy to use technology overnight. Instead, you need to constantly consolidate your knowledge system and a large number of practical exercises. Of course, you must not have your research and patience.

However, many friends may not have mastered the knowledge they have learned, and I believe that even if they have learned a technology, they still have read, read, and learned, I didn't really have a practical experience, so the technology I learned at that time felt that I had really learned and understood it, and I felt confident that I didn't have to practice it. This is wrong, it is because the instant learning is not immediately converted into your skills. Instead, you need to consolidate your skills multiple times, practice again, and expand new patterns to prove that you have mastered them.

Therefore, I created a blog post for this series. This blog post mainly uses a complete project as the actual practice and uses the project progress as the Wizard to analyze the implementation of each function, I think about this function. Of course, the blogger is also a little cainiao. The real intention is to record his learning process through this small project. Also, I beg you to pray, in the process of implementing each function, please contribute your thoughts in the comments, or feel that the method or logic I use is not appropriate and best, please write your thoughts into the comments as your views on the implementation of this function, as well as provide my ideas and opportunities for us to improve together. Thank you very much here.

The blogger has always liked anime, so he is fond of it. So this time he wants to develop an animation APP as a project, I also invited a non-design professional colleague to read several other animation apps and use their spare time to figure out what they have in common and what they will encounter in the future, I drew a simple source image. I am very grateful to this colleague. Let's take a look at our original needs.

I believe you will understand at a glance that the APP is still quite simple, but you may encounter all the features you need later. How would you design it at that time? How can we find out what they have in common?

Well, the source image is on. Let's take a look at the overall design. First of all, we can see that the entire APP has many similarities, for example, there are two top selection ky "http://www.bkjia.com/kf/web/php/" target = "_ blank" class = "keylink"> PHP7qOs1tC85MrHsrvNrLXEsry + signature/ssu1paGjy/nS1M7Sw8e/Signature + signature/Signature + qOsy/nS1M/uxL/release + 1tDO0sPH0OjSqsjnz8LKudPDo7o8L3A + DQo8cHJlIGNsYXNzPQ = "brush: java; "> <framelayout android:id="@+id/realtabcontent" android:layout_height="0dp" android:layout_weight="1" android:layout_width="match_parent"> <framelayout android:id="@android:id/tabcontent" android:layout_height="0dp" android:layout_weight="1" android:layout_width="0dp"> </framelayout></framelayout>

We define the LinearLayout layout in the vertical direction. FrameLayout is used to display all the content, and FragmentTabHost is used to display the menu at the bottom.

OK. The layout file has been configured. You can consider how to load it to Acitivity. Before that, I used to create an Application to encapsulate a global Context variable, for example:

Public class MyApplication extends Application {private static Context mContext; // obtain the context @ Override public void onCreate () {super. onCreate (); mContext = getApplicationContext () ;}/ *** get global context */public static Context getContext () {return mContext ;}}

Define a BaseActivity as the parent class of other activities, and encapsulate all the resource methods obtained.

public class BaseActivity extends Activity{    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);    }    public static Context getContext(){        return SanHuiAppsAnimationApplication.getContext();    }    public static int getLayoutId(Context context, String paramString) {        return context.getResources().getIdentifier(paramString, "layout", context.getPackageName());    }    public static int getStringId(Context context, String paramString) {        return context.getResources().getIdentifier(paramString, "string", context.getPackageName());    }    public static int getDrawableId(Context context, String paramString) {        return context.getResources().getIdentifier(paramString, "drawable", context.getPackageName());    }    public static int getStyleId(Context context, String paramString) {        return context.getResources().getIdentifier(paramString, "style", context.getPackageName());    }    public static int getId(Context context, String paramString) {        return context.getResources().getIdentifier(paramString, "id", context.getPackageName());    }    public static int getMenuId(Context context, String paramString) {        return context.getResources().getIdentifier(paramString, "menu", context.getPackageName());    }    public static int getColorId(Context context, String paramString) {        return context.getResources().getIdentifier(paramString, "color", context.getPackageName());    }    public static int getLayoutId(String paramString) {        return getLayoutId(getContext(), paramString);    }    public static int getStringId(String paramString) {        return getStringId(getContext(), paramString);    }    public static int getDrawableId(String paramString) {        return getDrawableId(getContext(), paramString);    }    public static int getStyleId(String paramString) {        return getStyleId(getContext(), paramString);    }    public static int getId(String paramString) {        return getId(getContext(), paramString);    }    public static int getMenuId(String paramString) {        return getMenuId(getContext(), paramString);    }    public static int getColorId(String paramString) {        return getColorId(getContext(), paramString);    }    public static int getAnimId(String paramString) {        return getContext().getResources().getIdentifier(paramString, "anim", getContext().getPackageName());    }    public static int getAttrId(String paramString) {        return getContext().getResources().getIdentifier(paramString, "attr", getContext().getPackageName());    }    public static int getInterpolator(String name) {        return getContext().getResources().getIdentifier(name, "interpolator", getContext().getPackageName());    }    public static int getDimenId(String paramString) {        return getContext().getResources().getIdentifier(paramString, "dimen", getContext().getPackageName());    }}

Well, the preparation has been completed. Now let's take a look at how to add the main. xml we just added to the MainActivity and switch the menu at the bottom.

Public class MainActivity extends FragmentActivity {private FragmentTabHost mFragmentTabHost; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (BaseActivity. getLayoutId ("activity_main"); mFragmentTabHost = (FragmentTabHost) findViewById (android. r. id. tabhost); // initialize FragmentTabHost mFragmentTabHost. setup (this, getSupportFragmentManager (), BaseActivity. getId ("realtabcontent"); addTabView ("Collection", BaseActivity. getDrawableId ("main_tab_item_collection"), CollectionFragment. class); addTabView ("Animation", BaseActivity. getDrawableId ("main_tab_item_animation"), AnimationFragment. class); addTabView ("Game", BaseActivity. getDrawableId ("main_tab_item_game"), GameFragment. class); addTabView ("Mine", BaseActivity. getDrawableId ("main_tab_item_mine"), MineFragment. class);} public void addTabView (String viewTag, int iconId, Class
  Cls) {View viewTabWidget = getTabWidget (iconId); TabHost. tabSpec tabSpec = mFragmentTabHost. newTabSpec (viewTag); tabSpec. setIndicator (viewTabWidget); mFragmentTabHost. addTab (tabSpec, cls, null);} public View getTabWidget (int iconId) {View viewTabWidget = LayoutInflater. from (this ). inflate (BaseActivity. getLayoutId ("activity_main_tabwidget"), null); ImageView view = (ImageView) viewTabWidget. findViewById (BaseActivity. getId ("tab_label"); view. setImageResource (iconId); return viewTabWidget ;}}

In fact, it is very simple. First, it is to get the resource file and bind the FragmentTabHost. It is worth noting that:
MFragmentTabHost = (FragmentTabHost) findViewById (android. r. id. tabhost); this is from android. r. id. get tabhost, main. this is also the id given in xml. Do not confuse it.

Then, you can get the supported FragmentManager to initialize the FragmentTabHost and bind it to the Fragment used to display the body.

Once again, we use the addTabView () method to display the View needed in the bottom menu. Here we use TabHost. tabSpec, which requires a few parameters, one is tag, and the other is for the view displayed in the bottom menu, you can choose to set it yourself. The menu View here is automatically selected using the selector of the xml file. Because the Four menus at the bottom are the same, only one menu is provided for reference:

Finally, we use mFragmentTabHost. addTab (tabSpec, cls, null); associate the bottom menu with the associated Fragment to display the corresponding body content when we click the bottom menu.

OK. The menu at the bottom is basically implemented. Let's take a look at the effect.

Well, you have also seen the results. Please comment in the comments area. Maybe your implementation method is better. You can learn together to make progress faster. Thank you.