Android – 导航栏（顶部/底部）实现：RadioButton + Fragment; 升级可滑动：+ViewPager
**原理：**通过一组RadioButton之间的选择切换，显示与当前选中的RadioButton‘绑定’ 的Fragment, 从而实现页面导航。至于具体要显示的内容的自己在各个Fragments去定义了！
导航栏简单实现：RadioButton + Fragment
效果图
一） 布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/padding_10"
android:background="@color/colorWhite"
android:orientation="horizontal">
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<RadioButton
android:id="@+id/radio_listView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:button="@null"
android:text="ListView"
android:textSize="@dimen/text_size_20"
android:textAlignment="center"
android:textColor="@drawable/selector_text" />
<RadioButton
android:id="@+id/radio_GridView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:button="@null"
android:text="GridView"
android:textSize="@dimen/text_size_20"
android:textAlignment="center"
android:textColor="@drawable/selector_text" />
<RadioButton
android:id="@+id/radio_recycleView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:button="@null"
android:text="RecycleVieew"
android:textSize="@dimen/text_size_20"
android:textAlignment="center"
android:textColor="@drawable/selector_text" />
</RadioGroup>
</LinearLayout>
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
二） 实现
public class Activity_Show_Data extends AppCompatActivity{
private RadioGroup radioGroup;
private FragmentTransaction transaction;//控制Fragment的容器（显隐，增删）
private Fragment_ListView fragmentListView;
private Fragment_GridView fragmentGridView;
private Fragment_Recycle_View fragmentRecycleView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity__show__data);
init();
setListener();
}
private void init() {
radioGroup = findViewById(R.id.radioGroup);
}
private void setListener() {
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
transaction = getSupportFragmentManager().beginTransaction();
hideAllFragment(transaction);
switch (i){
case R.id.radio_listView:
showListFragment();
break;
case R.id.radio_GridView:
showGridFragment();
break;
case R.id.radio_recycleView:
showRecyclerFragment();
break;
}
transaction.commit();
}
});
//默认选中radio_listView；
radioGroup.check(R.id.radio_listView);
}
//隐藏已有的Fragment
private void hideAllFragment(FragmentTransaction transaction) {
if(fragmentListView!=null){
transaction.hide(fragmentListView);
//transaction.remove(fragment_mine);
}
if(fragmentGridView!=null){
transaction.hide(fragmentGridView);
}
if(fragmentRecycleView!=null){
transaction.hide(fragmentRecycleView);
}
}
private void showListFragment(){
if(fragmentListView==null){
fragmentListView = new Fragment_ListView();
//将Fragment加入到FragmentTransaction内
transaction.add(R.id.fragment_container, fragmentListView);
}else{
transaction.show(fragmentListView);
}
}
private void showGridFragment(){
if(fragmentGridView==null){
fragmentGridView = new Fragment_GridView();
transaction.add(R.id.fragment_container, fragmentGridView);
}else{
transaction.show(fragmentGridView);
}
}
private void showRecyclerFragment(){
if(fragmentRecycleView==null){
fragmentRecycleView = new Fragment_Recycle_View();
transaction.add(R.id.fragment_container, fragmentRecycleView);
}else{
transaction.show(fragmentRecycleView);
}
}
}
可滑动切换的导航栏：RadioButton + Fragment + ViewPager
效果图：
一） 布局
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/padding_10"
android:background="@color/colorWhite"
android:orientation="horizontal">
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<RadioButton
android:id="@+id/radio_listView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:checked="true"
android:button="@null"
android:text="ListView"
android:textSize="@dimen/text_size_20"
android:textAlignment="center"
android:textColor="@drawable/selector_text" />
<RadioButton
android:id="@+id/radio_GridView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:button="@null"
android:text="GridView"
android:textSize="@dimen/text_size_20"
android:textAlignment="center"
android:textColor="@drawable/selector_text" />
<RadioButton
android:id="@+id/radio_recycleView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:button="@null"
android:text="RecycleVieew"
android:textSize="@dimen/text_size_20"
android:textAlignment="center"
android:textColor="@drawable/selector_text" />
</RadioGroup>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/colorWhite">
</android.support.v4.view.ViewPager>
二） 实现
public class Activity_Show_Data extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private RadioGroup radioGroup;
private ViewPager viewPager;
private List<Fragment> views;//用来存放Fragmets
//自定义的Fragment
private Fragment_ListView fragmentListView;
private Fragment_GridView fragmentGridView;
private Fragment_Recycle_View fragmentRecycleView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity__show__data);
init();
setData();
setListener();
}
private void init() {
radioGroup = findViewById(R.id.radioGroup);
viewPager = findViewById(R.id.vp_container);
//初始化自定义的Fragment, 并把他们放入list
fragmentListView = new Fragment_ListView();
fragmentGridView = new Fragment_GridView();
fragmentRecycleView = new Fragment_Recycle_View();
views = new ArrayList<>();
views.add(fragmentListView);
views.add(fragmentGridView);
views.add(fragmentRecycleView);
}
private void setData(){
//ViewPager设置适配器
viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int i) {
return views.get(i);
}
@Override
public int getCount() {
return views.size();
}
});
//默认显示第一个Fragment
viewPager.setCurrentItem(0);
}
private void setListener() {
viewPager.addOnPageChangeListener(this);
//radioGroup设立监听，使点击RadioButton时显示对应的Fragment
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
switch (i){
case R.id.radio_listView:
viewPager.setCurrentItem(0);
break;
case R.id.radio_GridView:
viewPager.setCurrentItem(1);
break;
case R.id.radio_recycleView:
viewPager.setCurrentItem(2);
break;
}
}
});
}
@Override
public void onPageScrolled(int i, float v, int i1) {
}
//重写，实现滑动页面进行Fragment的切换（这里使用改变选中的RadioButton）
@Override
public void onPageSelected(int i) {
switch (i){
case 0:
radioGroup.check(R.id.radio_listView);
break;
case 1:
radioGroup.check(R.id.radio_GridView);
break;
case 2:
radioGroup.check(R.id.radio_recycleView);
break;
}
}
@Override
public void onPageScrollStateChanged(int i) {
}
}
三） 自定义Fragment
与新建一个Activity类似，布局文件绑定方式有点不同。
以Fragment_ListView.java 举例：
-
fragment_list_view.xml
<ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="wrap_content" /> -
Fragment_ListView.java
public class Fragment_ListView extends Fragment implements ListView_Adapter.InterListener { private View view; private ListView listView; private ListView_Adapter adapter; private List<String> list; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //绑定布局文件 view = inflater.inflate(R.layout.fragment_list_view, container, false); //内部逻辑实现与在Activity内无异 init(); setData(); setListener(); return view; } private void init() { listView = view.findViewById(R.id.listView); } private void setData() { list = new ArrayList<>(); list.add("Monday"); list.add("Tuesday"); list.add("Wednesday"); list.add("Thursday"); list.add("Friday"); list.add("Saturday"); list.add("Sunday"); adapter = new ListView_Adapter<>(view.getContext(), list, this); listView.setAdapter(adapter); } private void setListener() { listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { //focus curtain line SystemUtil.ShowToast(getContext(), list.get(i)); } }); } @Override public void itemClick(View v) { //get the position of item that was clicked int position = (Integer)v.getTag(); switch (v.getId()){ case R.id.image: //do something Log.d("tag", "delete........" + list.get(position)); list.remove(position); adapter.notifyDataSetChanged(); break; } } } -
ListView_Adapter.java
public class ListView_Adapter<T> extends BaseAdapter implements View.OnClickListener { private Context context; private LayoutInflater inflater; private List<T> data; private InterListener interListener; public ListView_Adapter(Context context, List<T> list, InterListener interListener) { this.context = context; this.inflater = LayoutInflater.from(context); this.data = list; this.interListener = interListener; } @Override public int getCount() { return data==null? 0:data.size(); } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } //============================================ public interface InterListener { void itemClick(View v); } @Override public void onClick(View view) { interListener.itemClick(view); } //self define container for components in the layout; static class ViewHolder { public TextView tvData; public ImageView image; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = inflater.inflate(R.layout.layout_list_view, null); holder = new ViewHolder(); holder.tvData = convertView.findViewById(R.id.tvData); holder.image = convertView.findViewById(R.id.image); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.tvData.setText(data.get(position).toString()); holder.image.setImageResource(R.drawable.icon_del); //make component be able click from outside holder.image.setOnClickListener(this); holder.image.setTag(position); return convertView; } }
4385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
