android 列表凸显,Android中底部Tab中间按钮凸显效果

经小伙伴建议，

先上效果图：

scan.jpg

如上所示漂亮的主页面。那么这是如何实现的呢？其实主要就是在XML文件中进行的操作。然后就是在代码逻辑那边使用ViewPager + Fragment进行页面展示。

来看activity_main.xml文件

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity">

android:id="@+id/index_rl_contain"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/index_vp_fragment_list_top"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_alignParentTop="true">

android:id="@+id/index_fl_bottom_bar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="@color/index_fl_bg_color">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@mipmap/bottom_bar_background"

android:clickable="true"

android:orientation="horizontal">

android:id="@+id/index_bottom_bar_home"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginTop="6dp"

android:layout_marginBottom="4dp"

android:layout_weight="1"

android:orientation="vertical">

android:id="@+id/index_bottom_bar_home_image"

android:layout_width="20dp"

android:layout_height="27dp"

android:layout_gravity="top|center"

android:src="@drawable/index_bottom_bar_image_select_home" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginTop="2dp"

android:text="@string/index_bottom_bar_home"

android:textColor="@drawable/bottom_bar_text_color_select"

android:textSize="10sp" />

android:id="@+id/index_bottom_bar_dynamic_state"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginTop="6dp"

android:layout_marginBottom="4dp"

android:layout_weight="1"

android:orientation="vertical">

android:id="@+id/index_bottom_bar_dynamic_state_image"

android:layout_width="25dp"

android:layout_height="25dp"

android:layout_gravity="top|center"

android:layout_marginTop="2dp"

android:src="@drawable/index_bottom_bar_image_select_dynamic_state" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginTop="2dp"

android:text="@string/index_bottom_bar_dynamic_state"

android:textColor="@drawable/bottom_bar_text_color_select"

android:textSize="10sp" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1">

android:id="@+id/index_bottom_bar_integral"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginTop="6dp"

android:layout_marginBottom="4dp"

android:layout_weight="1"

android:orientation="vertical">

android:id="@+id/index_bottom_bar_integral_image"

android:layout_width="23dp"

android:layout_height="23dp"

android:layout_gravity="top|center"

android:src="@drawable/index_bottom_bar_image_select_integral" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginTop="2dp"

android:text="@string/index_bottom_bar_integral"

android:textColor="@drawable/bottom_bar_text_color_select"

android:textSize="10sp" />

android:id="@+id/index_bottom_bar_me"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:layout_marginTop="6dp"

android:layout_marginBottom="4dp"

android:layout_weight="1"

android:orientation="vertical">

android:id="@+id/index_bottom_bar_me_image"

android:layout_width="26dp"

android:layout_height="26dp"

android:layout_gravity="top|center"

android:src="@drawable/index_bottom_bar_image_select_me" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|center"

android:layout_marginTop="2dp"

android:text="@string/index_bottom_bar_me"

android:textColor="@drawable/bottom_bar_text_color_select"

android:textSize="10sp" />

android:id="@+id/index_bottom_bar_scan"

android:layout_width="80dp"

android:layout_height="80dp"

android:layout_alignParentBottom="true"

android:layout_centerInParent="true"

android:layout_marginBottom="0dp"

android:src="@mipmap/index_bottom_bar_scan" />

注释写的很清楚，OK，下一个。

MainActivity.java文件

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.FrameLayout;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

import android.widget.Toast;

import com.xiangrong.yunyang.indexscanicon.adapter.FragmentIndexAdapter;

import com.xiangrong.yunyang.indexscanicon.customview.MyViewPager;

import com.xiangrong.yunyang.indexscanicon.fragment.ExampleFragment;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

private MyViewPager index_vp_fragment_list_top;

private ImageView index_bottom_bar_home_image;

private LinearLayout index_bottom_bar_home;

private ImageView index_bottom_bar_dynamic_state_image;

private LinearLayout index_bottom_bar_dynamic_state;

private ImageView index_bottom_bar_integral_image;

private LinearLayout index_bottom_bar_integral;

private ImageView index_bottom_bar_me_image;

private LinearLayout index_bottom_bar_me;

private FrameLayout index_fl_bottom_bar;

private ImageView index_bottom_bar_scan;

private RelativeLayout index_rl_contain;

private List mFragments;

private FragmentIndexAdapter mFragmentIndexAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

initData();

initEvent();

}

private void initEvent() {

index_bottom_bar_home.setOnClickListener(new TabOnClickListener(0));

index_bottom_bar_dynamic_state.setOnClickListener(new TabOnClickListener(1));

index_bottom_bar_integral.setOnClickListener(new TabOnClickListener(2));

index_bottom_bar_me.setOnClickListener(new TabOnClickListener(3));

index_bottom_bar_scan.setOnClickListener(new TabOnClickListener(4));

}

private void initIndexFragmentAdapter() {

mFragmentIndexAdapter = new FragmentIndexAdapter(this.getSupportFragmentManager(), mFragments);

index_vp_fragment_list_top.setAdapter(mFragmentIndexAdapter);

index_bottom_bar_home.setSelected(true);

index_vp_fragment_list_top.setCurrentItem(0);

index_vp_fragment_list_top.setOffscreenPageLimit(3);

index_vp_fragment_list_top.addOnPageChangeListener(new TabOnPageChangeListener());

}

private void initData() {

mFragments = new ArrayList();

mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_home)));

mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_dynamic_state)));

mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_integral)));

mFragments.add(ExampleFragment.newInstance(getResources().getString(R.string.index_bottom_bar_me)));

initIndexFragmentAdapter();

}

private void initView() {

index_vp_fragment_list_top = (MyViewPager) findViewById(R.id.index_vp_fragment_list_top);

index_bottom_bar_home_image = (ImageView) findViewById(R.id.index_bottom_bar_home_image);

index_bottom_bar_home = (LinearLayout) findViewById(R.id.index_bottom_bar_home);

index_bottom_bar_dynamic_state_image = (ImageView) findViewById(R.id.index_bottom_bar_dynamic_state_image);

index_bottom_bar_dynamic_state = (LinearLayout) findViewById(R.id.index_bottom_bar_dynamic_state);

index_bottom_bar_integral_image = (ImageView) findViewById(R.id.index_bottom_bar_integral_image);

index_bottom_bar_integral = (LinearLayout) findViewById(R.id.index_bottom_bar_integral);

index_bottom_bar_me_image = (ImageView) findViewById(R.id.index_bottom_bar_me_image);

index_bottom_bar_me = (LinearLayout) findViewById(R.id.index_bottom_bar_me);

index_fl_bottom_bar = (FrameLayout) findViewById(R.id.index_fl_bottom_bar);

index_bottom_bar_scan = (ImageView) findViewById(R.id.index_bottom_bar_scan);

index_rl_contain = (RelativeLayout) findViewById(R.id.index_rl_contain);

}

/**

* Bottom_Bar的点击事件

*/

public class TabOnClickListener implements View.OnClickListener {

private int index = 0;

public TabOnClickListener(int i) {

index = i;

}

public void onClick(View v) {

if (index == 4) {

// 跳转到Scan界面

Toast.makeText(MainActivity.this, "点击了扫描按钮", Toast.LENGTH_SHORT).show();

} else {

//选择某一页

index_vp_fragment_list_top.setCurrentItem(index, false);

}

}

}

public class TabOnPageChangeListener implements ViewPager.OnPageChangeListener {

//当滑动状态改变时调用

public void onPageScrollStateChanged(int state) {

}

//当前页面被滑动时调用

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

//当新的页面被选中时调用

public void onPageSelected(int position) {

resetTextView();

switch (position) {

case 0:

index_bottom_bar_home.setSelected(true);

break;

case 1:

index_bottom_bar_dynamic_state.setSelected(true);

break;

case 2:

index_bottom_bar_integral.setSelected(true);

break;

case 3:

index_bottom_bar_me.setSelected(true);

break;

}

}

}

/**

* 重置所有TextView的字体颜色

*/

private void resetTextView() {

index_bottom_bar_home.setSelected(false);

index_bottom_bar_dynamic_state.setSelected(false);

index_bottom_bar_integral.setSelected(false);

index_bottom_bar_me.setSelected(false);

}

}

一样，注释写的很清楚，来看一下上述代码用到的MyViewPager，以及MyViewPager的适配器FragmentIndexAdapter，和它联动的ExampleFragment和fragment_example.xml文件。

首先是MyViewPager.java

import android.content.Context;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.support.v4.view.ViewPager;

import android.util.AttributeSet;

import android.view.MotionEvent;

/**

* 作者 yunyang

* 时间 2019/3/13 10:20

* 文件 YunyangBlogDemo

* 描述 不滑动的ViewPager

*/

public class MyViewPager extends ViewPager {

private boolean scrollble = false;

public MyViewPager(@NonNull Context context) {

this(context, null);

}

public MyViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

}

@Override

public boolean onTouchEvent(MotionEvent ev) {

if (scrollble == false) {

return false;

} else {

return super.onTouchEvent(ev);

}

}

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

if (scrollble == false) {

return false;

} else {

return super.onInterceptTouchEvent(ev);

}

}

}

然后是MyViewPager的适配器FragmentIndexAdapter

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**

* 作者 yunyang

* 时间 2019/3/13 10:48

* 文件 YunyangBlogDemo

* 描述 主页面的Fragment适配器

*/

public class FragmentIndexAdapter extends FragmentPagerAdapter {

private List fragments;

public FragmentIndexAdapter(FragmentManager fm, List fragments) {

super(fm);

this.fragments = fragments;

}

public Fragment getItem(int fragment) {

return fragments.get(fragment);

}

public int getCount() {

return fragments.size();

}

}

随后是ExampleFragment.java

import android.os.Bundle;

import android.support.annotation.NonNull;

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;

import com.xiangrong.yunyang.indexscanicon.R;

/**

* 作者 yunyang

* 时间 2019/3/13 10:34

* 文件 YunyangBlogDemo

* 描述 示例Fragment

*/

public class ExampleFragment extends Fragment {

private static final String SECTION_STRING = "fragment_string";

public static ExampleFragment newInstance(String sectionNumber) {

ExampleFragment fragment = new ExampleFragment();

Bundle args = new Bundle();

args.putString(SECTION_STRING, sectionNumber);

fragment.setArguments(args);

return fragment;

}

@Nullable

@Override

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_example, container, false);

TextView textView = (TextView) view.findViewById(R.id.index_bottom_bar_fragment_example);

textView.setText(getString(R.string.fragment_example_string, getArguments().getString(SECTION_STRING)));

return view;

}

}

最后是ExampleFragment的布局文件fragment_example.xml

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/index_bottom_bar_fragment_example"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:textColor="@color/colorAccent"

android:textSize="24sp" />

随后运行程序展示主页面就OK了呢。