Typical Android Interface Design (3) -- access Netease news to implement dual-Navigation tab switch, and android Netease news

Typical Android Interface Design (3) -- access Netease news to implement dual-Navigation tab switch, and android Netease news

I. Problem Description

Dual-Navigation tab switch (bottom block + header navigation in the area). FragmentTabHost + Fragment is used in the bottom area of the solution. ViewPager + Fragment is used for header navigation in the area, based on the previous blog Android typical Interface Design 2 (FragmentTabHost + Fragment for bottom tab switching) and Android typical Interface Design 1 (ViewPage + Fragment for tab slide switching on top of the Area) integrated application implementation. Click http://www.cnblogs.com/jerehedu/p/4607599.html?dxjmsj. Effect:

Ii. Main Components of the case

1. First, implement tab switching in the bottom block. For details about this part, refer to blog: Typical Android Interface Design 2 (FragmentTabHost + Fragment)

2. The bottom tab corresponds to the Fragment component. A total of five Fragment components are NewsFragment, ReadFragment, FoundFragment, OwnerFragment, and VideoFragment. The interfaces are designed based on different sections, next, we will implement the NewsFragment Interface Design Based on the previous steps. This interface enables switching between various news channels, that is, the area's header navigation.

Let's take a look at the layout file of NewsFragment:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <RelativeLayout android:layout_width="match_parent"    android:layout_height="wrap_content">      <HorizontalScrollView        android:id="@+id/hvChannel"         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_toLeftOf="@+id/ivShowChannel"        android:scrollbars="none">        <RadioGroup         android:id="@+id/rgChannel"         android:layout_width="wrap_content"        android:layout_height="wrap_content" android:orientation="horizontal">                 </RadioGroup>      </HorizontalScrollView>    <ImageView android:layout_width="40dp"         android:layout_height="40dp"        android:id="@+id/ivShowChannel"        android:layout_alignParentRight="true"        android:src="@drawable/channel_down_narrow"        android:scaleType="fitXY"        />        </RelativeLayout>      <android.support.v4.view.ViewPager              android:id="@+id/vpNewsList"              android:layout_width="match_parent"            android:layout_height="match_parent"          >      </android.support.v4.view.ViewPager>          </LinearLayout>

The NewsFragment code is as follows:

public class NewsFragment extends Fragment implements  OnPageChangeListener {    private View view=null;    private RadioGroup rgChannel=null;    private ViewPager viewPager;    private HorizontalScrollView hvChannel=null;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        if(view==null){            view=inflater.inflate(R.layout.news_fragment_layout, null);            rgChannel=(RadioGroup)view.findViewById(R.id.rgChannel);            viewPager=(ViewPager)view.findViewById(R.id.vpNewsList);            hvChannel=(HorizontalScrollView)view.findViewById(R.id.hvChannel);            rgChannel.setOnCheckedChangeListener(                    new RadioGroup.OnCheckedChangeListener() {                @Override                public void onCheckedChanged(RadioGroup group,                         int checkedId) {                    viewPager.setCurrentItem(checkedId);                        }            });                        initTab(inflater);            initViewPager();        }        ViewGroup parent=(ViewGroup)view.getParent();        if(parent!=null){            parent.removeView(view);        }        return view;    }private List<Fragment> newsChannelList=new ArrayList<Fragment>();private NewsPageFragmentAdapter adapter;         private void initViewPager(){        List<Channel> channelList=ChannelDb.getSelectedChannel();        for(int i=0;i<channelList.size();i++){            NewsChannelFragment  fragment=new NewsChannelFragment();            Bundle bundle=new Bundle();            bundle.putString("cname", channelList.get(i).getName());            fragment.setArguments(bundle);            newsChannelList.add(fragment);        }        adapter=new NewsPageFragmentAdapter(super.getActivity().getSupportFragmentManager(), newsChannelList);        viewPager.setAdapter(adapter);        viewPager.setOffscreenPageLimit(2);        viewPager.setCurrentItem(0);        viewPager.setOnPageChangeListener(this);    }    private void initTab(LayoutInflater inflater){        List<Channel> channelList=ChannelDb.getSelectedChannel();        for(int i=0;i<channelList.size();i++){            RadioButton rb=(RadioButton)inflater.                    inflate(R.layout.tab_rb, null);            rb.setId(i);            rb.setText(channelList.get(i).getName());            RadioGroup.LayoutParams params=new         RadioGroup.LayoutParams(RadioGroup.LayoutParams.WRAP_CONTENT,                            RadioGroup.LayoutParams.WRAP_CONTENT);            rgChannel.addView(rb,params);        }        rgChannel.check(0);    }    @Override    public void onPageScrollStateChanged(int arg0) {    }    @Override    public void onPageScrolled(int arg0, float arg1, int arg2) {    }    @Override    public void onPageSelected(int idx) {        setTab(idx);    }    private void setTab(int idx){        RadioButton rb=(RadioButton)rgChannel.getChildAt(idx);        rb.setChecked(true);        int left=rb.getLeft();        int width=rb.getMeasuredWidth();        DisplayMetrics metrics=new DisplayMetrics();        super.getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);        int screenWidth=metrics.widthPixels;        int len=left+width/2-screenWidth/2;        hvChannel.smoothScrollTo(len, 0);    }}

3. NewsChannelFragment component code:

public class NewsChannelFragment extends Fragment {    private String channelName;    @Override    public void setArguments(Bundle args) {        channelName=args.getString("cname");    }    @Override    public void onAttach(Activity activity) {        // TODO Auto-generated method stub        super.onAttach(activity);    }    private TextView view;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,            Bundle savedInstanceState) {        if(view==null){            view=new  TextView(super.getActivity());            view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));            view.setGravity(Gravity.CENTER);            view.setTextSize(30);            view.setText(channelName);        }        ViewGroup parent=(ViewGroup)view.getParent();        if(parent!=null){            parent.removeView(view);        }        return view;    }    @Override    public void onDestroy() {        // TODO Auto-generated method stub        super.onDestroy();    }}

 

For more information, clickView Source CodeRun the test in person.

For questions or technical exchanges, please join the official QQ group: (452379712)

 

Author: Jerry Education
Source: http://www.cnblogs.com/jerehedu/
The copyright of this article belongs to Yantai Jerry Education Technology Co., Ltd. and the blog Park. You are welcome to repost it. However, you must keep this statement without the author's consent and provide the original article connection on the article page, otherwise, you are entitled to pursue legal liability.