Androidはトップの下の二重ナビゲーションインターフェース機能を実現します。
最近はナビゲーション機能を使いたいです。いろいろな資料を調べました。ようやく機能が実現しました。こちらは自分にいくつかのノートをあげましょう。
まず効果を見てみます
それでは実現します。
ボトムナビゲーションバーはフラジャメントタbHost+Fragmentで実現することを選択しました。この方法はとても使いやすいと思います。コード量も多くないです。
まずは最初のactivityです。main.xml
xmlファイルに直接書いてもいいです。
このxmlファイルは一つのviewに一つのtabを加えます。 デブリを表示するためにviewを使います。tabは下のボタンの数を置くために使います。
それからtab_ですfoot.xml
効果を表示します。
またMainActivityのコードです。
以下はTabDb類です
上のナビゲーションバーを実現します。最後にRadioGroup+ViewPagerを使ってたくさん見ました。
まず最初のピースのためにxmlレイアウトを設計します。
fm_one.xml
その後、ナビゲーションバーの各項目のレイアウトを変更します。
tab_rb.xml
tab_rb_selector.xml
最後にOneFmクラスを実現します。
データクラス
HTab.java
OneFm 1.java
最後にfragment.xmlを貼ってください。各欠片のデフォルト表示ページです。
ノートにしましょう。しばらく更新していませんでした。卒業したばかりで、時間が切れてしまいました。散歩を止めて、自分の記録を残しておきます。
ダウンロード住所:クリックしてリンクを開く
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
まず効果を見てみます
それでは実現します。
ボトムナビゲーションバーはフラジャメントタbHost+Fragmentで実現することを選択しました。この方法はとても使いやすいと思います。コード量も多くないです。
まずは最初のactivityです。main.xml
<RelativeLayout 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"
tools:context="${relativePackage}.${activityClass}" >
<FrameLayout
android:id="@+id/main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/main_tab"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</FrameLayout>
<view
android:id="@+id/main_tab"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
class="android.support.v4.app.FragmentTabHost" />
</RelativeLayout>
その中で私は直接引いたviewなので、フラジャメントタbHostになりました。xmlファイルに直接書いてもいいです。
このxmlファイルは一つのviewに一つのtabを加えます。 デブリを表示するためにviewを使います。tabは下のボタンの数を置くために使います。
それからtab_ですfoot.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:background="#F6F6F6"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/foot_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home1" />
<TextView
android:id="@+id/foot_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:text=" "
android:textColor="@color/tab_color" />
</LinearLayout>
下のボタンごとのレイアウト設定のxmlファイルです。効果を表示します。
またMainActivityのコードです。
package com.gjn.mynavigation;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
public class MainActivity extends FragmentActivity implements OnTabChangeListener {
private FragmentTabHost mTabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
// FragmentTabHost
initHost();
//
initTab();
//
mTabHost.onTabChanged(TabDb.getTabsTxt()[0]);
}
private void initTab() {
String[] tabs = TabDb.getTabsTxt();
for (int i = 0; i < tabs.length; i++) {
// TabSpec
TabSpec tabSpec = mTabHost.newTabSpec(TabDb.getTabsTxt()[i]);
// view
View view = LayoutInflater.from(this).inflate(R.layout.tabs_foot, null);
((TextView) view.findViewById(R.id.foot_tv)).setText(TabDb.getTabsTxt()[i]);
((ImageView) view.findViewById(R.id.foot_iv)).setImageResource(TabDb.getTabsImg()[i]);
tabSpec.setIndicator(view);
// TabSpec
mTabHost.addTab(tabSpec,TabDb.getFramgent()[i],null);
}
}
/***
* Host
*/
private void initHost() {
mTabHost = (FragmentTabHost) findViewById(R.id.main_tab);
// setup view
mTabHost.setup(this, getSupportFragmentManager(),R.id.main_view);
//
mTabHost.getTabWidget().setDividerDrawable(null);
//
mTabHost.setOnTabChangedListener(this);
}
@Override
public void onTabChanged(String arg0) {
//
TabWidget tabw = mTabHost.getTabWidget();
for (int i = 0; i < tabw.getChildCount(); i++) {
View v = tabw.getChildAt(i);
TextView tv = (TextView) v.findViewById(R.id.foot_tv);
ImageView iv = (ImageView) v.findViewById(R.id.foot_iv);
//
if (i == mTabHost.getCurrentTab()) {
tv.setTextColor(getResources().getColor(R.color.tab_light_color));
iv.setImageResource(TabDb.getTabsImgLight()[i]);
}else{
tv.setTextColor(getResources().getColor(R.color.tab_color));
iv.setImageResource(TabDb.getTabsImg()[i]);
}
}
}
}
TabDbクラスは、ナビゲーションバーのデータと画像の切り替え時のリソースです。以下はTabDb類です
package com.gjn.mynavigation;
public class TabDb {
/***
*
*/
public static String[] getTabsTxt() {
String[] tabs = {" "," "," "," "};
return tabs;
}
/***
*
*/
public static Class[] getFramgent(){
Class[] cls = {OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class};
return cls ;
}
/***
*
*/
public static int[] getTabsImg(){
int[] img = {R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1};
return img ;
}
/***
*
*/
public static int[] getTabsImgLight(){
int[] img = {R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2};
return img ;
}
}
これで、ボトムナビゲーションバーは完全に実現されました。上のナビゲーションバーを実現します。最後にRadioGroup+ViewPagerを使ってたくさん見ました。
まず最初のピースのためにxmlレイアウトを設計します。
fm_one.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" >
<HorizontalScrollView
android:id="@+id/one_hv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
<RadioGroup
android:id="@+id/one_rg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</RadioGroup>
</HorizontalScrollView>
<view
android:id="@+id/one_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
class="android.support.v4.view.ViewPager" />
</LinearLayout>
上部ナビゲーションバーと表示viewを設定します。その後、ナビゲーションバーの各項目のレイアウトを変更します。
tab_rb.xml
<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tab_rb_selector"
android:button="@null"
android:paddingBottom="10dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:text=" " >
</RadioButton>
ここでselectorファイルを設定してクリックと未クリックの状態を制御します。tab_rb_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- -->
<item android:state_checked="true">
<layer-list >
<item >
<shape android:shape="rectangle">
<stroke android:width="5dp" android:color="@color/tab_light_color"/>
</shape>
</item>
<item android:bottom="5dp">
<shape android:shape="rectangle">
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>
</item>
<!-- -->
<item >
<shape >
<solid android:color="#fafafa"/>
</shape>
</item>
</selector>
クリックとデフォルトの時の表示状態を設定しました。最後にOneFmクラスを実現します。
package com.gjn.mynavigation;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.LayoutParams;
import android.widget.RadioGroup.OnCheckedChangeListener;
public class OneFm extends Fragment implements OnPageChangeListener {
private View view;
private RadioGroup rg_;
private ViewPager vp_;
private HorizontalScrollView hv_;
private List<Fragment> newsList = new ArrayList<Fragment>();
private OneFmAdapter adapter;
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
if (view == null) {
// view
view = inflater.inflate(R.layout.fm_one, container,false);
rg_ = (RadioGroup) view.findViewById(R.id.one_rg);
vp_ = (ViewPager) view.findViewById(R.id.one_view);
hv_ = (HorizontalScrollView) view.findViewById(R.id.one_hv);
// RadioGroup
rg_.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int id) {
vp_.setCurrentItem(id);
}
});
//
initTab(inflater);
// viewpager
initView();
}
/*
* view
* bug
* view
*/
ViewGroup parent = (ViewGroup) view.getParent();
if (parent != null) {
parent.removeView(view);
}
return view;
}
/***
* viewpager
*/
private void initView() {
List<HTab> hTabs = HTabDb.getSelected();
for (int i = 0; i < hTabs.size(); i++) {
OneFm1 fm1 = new OneFm1();
Bundle bundle = new Bundle();
bundle.putString("name", hTabs.get(i).getName());
fm1.setArguments(bundle);
newsList.add(fm1);
}
// viewpager
adapter = new OneFmAdapter(getActivity().getSupportFragmentManager(),newsList);
vp_.setAdapter(adapter);
// viewpager
vp_.setOffscreenPageLimit(2);
//
vp_.setCurrentItem(0);
// viewpager
vp_.setOnPageChangeListener(this);
}
/***
*
* @param inflater
*/
private void initTab(LayoutInflater inflater) {
List<HTab> hTabs = HTabDb.getSelected();
for (int i = 0; i < hTabs.size(); i++) {
//
RadioButton rbButton = (RadioButton) inflater.inflate(R.layout.tab_rb, null);
rbButton.setId(i);
rbButton.setText(hTabs.get(i).getName());
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
// RadioGroup
rg_.addView(rbButton,params);
}
//
rg_.check(0);
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int id) {
setTab(id);
}
/***
*
* @param id
*/
private void setTab(int id) {
RadioButton rbButton = (RadioButton) rg_.getChildAt(id);
//
rbButton.setChecked(true);
//
int left = rbButton.getLeft();
int width = rbButton.getMeasuredWidth();
DisplayMetrics metrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
int screenWidth = metrics.widthPixels;
// = + button -
int len = left + width / 2 - screenWidth / 2;
//
hv_.smoothScrollTo(len, 0);
}
}
中には二つのデータ類と一つの欠片類があります。データクラス
HTab.java
package com.gjn.mynavigation;
/***
* Tab
*
*/
public class HTab {
private String name;
public HTab(String name) {
super();
this.setName(name);
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
HTabDb.java
package com.gjn.mynavigation;
import java.util.ArrayList;
import java.util.List;
public class HTabDb {
private static final List<HTab> Selected = new ArrayList<HTab>();
static{
Selected.add(new HTab(" "));
Selected.add(new HTab(" "));
Selected.add(new HTab(" "));
Selected.add(new HTab(" "));
Selected.add(new HTab(" "));
Selected.add(new HTab(" "));
Selected.add(new HTab(" "));
Selected.add(new HTab(" "));
}
/***
* tab
*/
public static List<HTab> getSelected() {
return Selected;
}
}
フラグメント類OneFm 1.java
package com.gjn.mynavigation;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class OneFm1 extends Fragment {
private String name;
@Override
public void setArguments(Bundle args) {
name = args.getString("name");
}
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment, container,false);
((TextView) view.findViewById(R.id.fm_text)).setText(name);
return view;
}
}
このようにトップのナビゲーションバーを最初のfragmentに追加し、切替機能を実現しました。最後にfragment.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:gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/fm_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
まとめ:ノートにしましょう。しばらく更新していませんでした。卒業したばかりで、時間が切れてしまいました。散歩を止めて、自分の記録を残しておきます。
ダウンロード住所:クリックしてリンクを開く
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。