底部导航栏突出

今天看了一个ios上网易云音乐设置皮肤后底部导航栏的图片就会多出导航栏，我觉得这个比较好看，所以就做了一个虽然没有图片，不多说先看图你就明白了

上图是这个项目的展示，显示部分为viewpage，底部其实就是布局，一个LinearLayout，里面有五个图片

不多说上马！

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:layout_gravity="bottom"    android:clipChildren="false"    android:gravity="bottom"    android:orientation="vertical" >   <!--<FrameLayout-->       <!--android:id="@+id/fragment_ll"-->       <!--android:layout_width="match_parent"-->       <!--android:layout_height="match_parent">-->   <!--</FrameLayout>-->    <android.support.v4.view.ViewPager        android:id="@+id/vPager"        android:layout_width="fill_parent"        android:layout_height="match_parent"        android:layout_gravity="center"        android:layout_weight="1.0"        android:background="@color/white"        />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="100px"        android:layout_gravity="bottom"        android:background="#234221"        android:gravity="bottom" >        <ImageView            android:id="@+id/imageView1"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:src="@mipmap/ic_launcher" />        <ImageView            android:id="@+id/imageView2"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:src="@mipmap/ic_launcher" />        <ImageView            android:id="@+id/imageView3"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_gravity="bottom"            android:layout_weight="1"            android:src="@mipmap/ic_launcher" />        <ImageView            android:id="@+id/imageView4"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:src="@mipmap/ic_launcher" />        <ImageView            android:id="@+id/imageView5"            android:layout_width="0dp"            android:layout_height="fill_parent"            android:layout_weight="1"            android:src="@mipmap/ic_launcher" />    </LinearLayout></LinearLayout>

先写一个布局，特殊的地方就在于

    android:clipChildren="false"

在添加了一个这个android:clipChildren

意思：是否限制子View在其范围内，我们将其值设置为false后那么当子控件的高度高于父控件时也会完全显示,而不会被压缩

以下是Activity类：

 

package com.bc.jy.capital.myapplicationsssss.activity;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.content.ContextCompat;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.ViewGroup.LayoutParams;import android.view.animation.Animation;import android.widget.ImageView;import android.widget.Toast;import com.bc.jy.capital.myapplicationsssss.R;import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment;import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment1;import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment2;import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment3;import com.bc.jy.capital.myapplicationsssss.fragment.MainFragment4;import java.util.ArrayList;import butterknife.ButterKnife;import static com.bc.jy.capital.myapplicationsssss.R.mipmap.ceshisss;import static com.bc.jy.capital.myapplicationsssss.R.mipmap.ic_launcher;/** * Created by Administrator on 2017/6/9. */public class FragmentAcitivity extends AppCompatActivity implements View.OnClickListener{//    @BindView(R.id.fragment_ll)//    LinearLayout fragmentLl;    ImageView imageView1;    ImageView imageView2;    ImageView imageView3;    ImageView imageView4;    ImageView imageView5;    private int height = 100;//固定Imageview的高，单位px    //动态设置图片宽高    LayoutParams para1;    LayoutParams para2;    LayoutParams para3;    LayoutParams para4;    LayoutParams para5;    //存放Fragment    private ArrayList<Fragment> fragmentArrayList;    private ViewPager mViewPager;    //管理Fragment    private FragmentManager fragmentManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.sssssssssss);        ButterKnife.bind(this);        mViewPager = (ViewPager) findViewById(R.id.vPager);        //将fragment添加到数组        fragmentArrayList = new ArrayList<Fragment>();        fragmentArrayList.add(new MainFragment());        fragmentArrayList.add(new MainFragment1());        fragmentArrayList.add(new MainFragment2());        fragmentArrayList.add(new MainFragment3());        fragmentArrayList.add(new MainFragment4());        fragmentManager = getSupportFragmentManager();        //初始化        imageView1 = (ImageView) findViewById(R.id.imageView1);        imageView2 = (ImageView) findViewById(R.id.imageView2);        imageView3 = (ImageView) findViewById(R.id.imageView3);        imageView4 = (ImageView) findViewById(R.id.imageView4);        imageView5 = (ImageView) findViewById(R.id.imageView5);        imageView1.setOnClickListener(this);        imageView2.setOnClickListener(this);        imageView3.setOnClickListener(this);        imageView4.setOnClickListener(this);        imageView5.setOnClickListener(this);//        switchFragment(new MainFragment());//        img1();        InitViewPager();    }    /**     * 初始化页卡内容区     */    private void InitViewPager() {        mViewPager = (ViewPager) findViewById(R.id.vPager);        mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList));        //让ViewPager缓存2个页面        mViewPager.setOffscreenPageLimit(2);        //设置默认打开第一页        mViewPager.setCurrentItem(0);        img1();        //设置viewpager页面滑动监听事件        mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());    }    //图片的点击事件    @Override    public void onClick(View view) {        switch (view.getId()){            case R.id.imageView1://                点击第一个图片到第一个fragment                img1();                Toast.makeText(FragmentAcitivity.this,"imageView1",Toast.LENGTH_SHORT).show();                mViewPager.setCurrentItem(0);//数组从0开始                break;            case R.id.imageView2:                Toast.makeText(FragmentAcitivity.this,"imageView2",Toast.LENGTH_SHORT).show();                mViewPager.setCurrentItem(1);                img2();                break;            case R.id.imageView3:                mViewPager.setCurrentItem(2);                img3();                break;            case R.id.imageView4:                mViewPager.setCurrentItem(3);                img4();                break;            case R.id.imageView5:                mViewPager.setCurrentItem(4);                img5();                break;        }    }    //图片1的设置方式，如果点击第一个图片，或滑动到第一个页面则使用此方法进行设置，以下    public void img1(){        para1 = imageView1.getLayoutParams();//动态设置ImageView的大小        para2 = imageView2.getLayoutParams();        para3 = imageView3.getLayoutParams();        para4 = imageView4.getLayoutParams();        para5 = imageView5.getLayoutParams();        para1.height = 300;        para2.height = height;        para3.height = height;        para4.height = height;        para5.height = height;        imageView1.setLayoutParams(para1);        imageView2.setLayoutParams(para2);        imageView3.setLayoutParams(para3);        imageView4.setLayoutParams(para4);        imageView5.setLayoutParams(para5);        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));//动态设置ImageView的图片        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));    }    public void img2(){        para1 = imageView1.getLayoutParams();        para2 = imageView2.getLayoutParams();        para3 = imageView3.getLayoutParams();        para4 = imageView4.getLayoutParams();        para5 = imageView5.getLayoutParams();        para2.height = 300;//        para2.width = 300;        para1.height = height;        para3.height = height;        para4.height = height;        para5.height = height;        imageView1.setLayoutParams(para1);        imageView2.setLayoutParams(para2);        imageView3.setLayoutParams(para3);        imageView4.setLayoutParams(para4);        imageView5.setLayoutParams(para5);        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));    }    public void img3(){        para1 = imageView1.getLayoutParams();        para2 = imageView2.getLayoutParams();        para3 = imageView3.getLayoutParams();        para4 = imageView4.getLayoutParams();        para5 = imageView5.getLayoutParams();        para3.height = 300;//        para3.width = 300;        para1.height = height;        para2.height = height;        para4.height = height;        para5.height = height;        imageView1.setLayoutParams(para1);        imageView2.setLayoutParams(para2);        imageView3.setLayoutParams(para3);        imageView4.setLayoutParams(para4);        imageView5.setLayoutParams(para5);        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));    }    public void img4(){        para1 = imageView1.getLayoutParams();        para2 = imageView2.getLayoutParams();        para3 = imageView3.getLayoutParams();        para4 = imageView4.getLayoutParams();        para5 = imageView5.getLayoutParams();        para4.height = 300;        para1.height = height;        para2.height = height;        para3.height = height;        para5.height = height;        imageView1.setLayoutParams(para1);        imageView2.setLayoutParams(para2);        imageView3.setLayoutParams(para3);        imageView4.setLayoutParams(para4);        imageView5.setLayoutParams(para5);        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));    }    public void img5(){        para1 = imageView1.getLayoutParams();        para2 = imageView2.getLayoutParams();        para3 = imageView3.getLayoutParams();        para4 = imageView4.getLayoutParams();        para5 = imageView5.getLayoutParams();        para5.height = 300;        para2.height = height;        para3.height = height;        para4.height = height;        para1.height = height;        imageView1.setLayoutParams(para1);        imageView2.setLayoutParams(para2);        imageView3.setLayoutParams(para3);        imageView4.setLayoutParams(para4);        imageView5.setLayoutParams(para5);        imageView1.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView2.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView3.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView4.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ic_launcher));        imageView5.setImageDrawable(ContextCompat.getDrawable(FragmentAcitivity.this, ceshisss));    }    /**     * 页卡切换监听     * @author weizhi     * @version 1.0     */    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{        @Override        public void onPageSelected(int position) {            Animation animation = null ;            switch (position){                //当前为页卡1                case 0:                    img1();                    break;                //当前为页卡2                case 1:                    //从页卡1跳转转到页卡2                    img2();                    break;                //当前为页卡3                case 2:                    //从页卡1跳转转到页卡2                    img3();                    break;                //当前为页卡3                case 3:                    //从页卡1跳转转到页卡2                    img4();                    break;                //当前为页卡3                case 4:                    //从页卡1跳转转到页卡2                    img5();                    break;            }        }        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageScrollStateChanged(int state) {        }    };}

虽然代码比较多，但其实大部分为重复代码，注释我已经加之代码中，如果不懂可以看一看代码内的注释。

其中使用到了viewpage，所以一定不要忘了它的适配器：

package com.bc.jy.capital.myapplicationsssss.activity;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.view.ViewGroup;import java.util.ArrayList;/** * Fragment适配器 * @author weizhi * @version 1.0 */public class MFragmentPagerAdapter extends FragmentPagerAdapter {    //存放Fragment的数组    private ArrayList<Fragment> fragmentsList;    public MFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {        super(fm);        this.fragmentsList = fragmentsList;    }    @Override    public Fragment getItem(int position) {        return fragmentsList.get(position);    }    @Override    public int getCount() {        return fragmentsList.size();    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        super.destroyItem(container, position, object);    }}

在Activity中还有就是fragment了这里就不用我写了吧，主要你会创建fragment类就可以了：

package com.bc.jy.capital.myapplicationsssss.fragment;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 com.bc.jy.capital.myapplicationsssss.R;/** * Created by Administrator on 2017/11/30. */public class MainFragment extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View v = View.inflate(getActivity(), R.layout.fragment,null);        return v;    }}

算了，我还是写上一个吧，其他的只要复制就好了，布局里想写什么就写什么，反正你高兴。

其实就是这么简单。虽然我搞了一天，哈哈。

如果有什么问题可以私聊我，或者评论，看到我会回复。