Android仿网易客户端顶部导航栏效果_Android

最近刚写了一个网易客户端首页导航条的动画效果，现在分享出来给大家学习学习。我说一下这个效果的核心原理。下面是效果图：

       

 首先是布局，这个布局是我从网易客户端反编译后弄来的。大家看后应该明白，布局文件如下：

<FrameLayout
    android:id="@id/column_navi"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/top_column_bg" > 

    <HorizontalScrollView
      android:id="@id/column_scrollview"
      android:layout_width="fill_parent"
      android:layout_height="45.0dip"
      android:layout_gravity="center"
      android:fadingEdge="vertical"
      android:paddingLeft="9.0dip"
      android:paddingRight="9.0dip"
      android:scrollbars="none" > 

      <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" > 

        <ImageView
          android:id="@id/column_slide_bar"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center_vertical"
          android:src="@drawable/slidebar" /> 

        <LinearLayout
          android:id="@id/column_title_layout"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_gravity="center_vertical"
          android:gravity="center_vertical"
          android:paddingLeft="5px"
          android:weightSum="6.0" />
      </FrameLayout>
    </HorizontalScrollView> 

    <ImageButton
      android:id="@id/column_to_left"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_centerVertical="true"
      android:layout_gravity="left|center"
      android:layout_marginLeft="2.0dip"
      android:layout_marginRight="1.0dip"
      android:background="#00000000"
      android:src="@drawable/arr_left"
      android:visibility="visible" /> 

    <ImageButton
      android:id="@id/column_to_right"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentRight="true"
      android:layout_centerVertical="true"
      android:layout_gravity="right|center"
      android:layout_marginLeft="1.0dip"
      android:layout_marginRight="2.0dip"
      android:background="#00000000"
      android:src="@drawable/arr_right"
      android:visibility="visible" />
  </FrameLayout>

这里用了HorizontalScrollView横向滚动视图主要是为了实现当导航栏个数超出屏幕以后可以实现左右移动的效果，这2个ImageButton则是用来实现左右滚动的操作。HorizontalScrollView里面用的一个框架布局，大家都知道框架布局是一个叠加式的 布局，所以里面的ImageView会在LinearLayout布局下面一层，这个ImageView就是实现动态背景效果的。而LinearLayout里面放的是TextView,这里是在后台程序里面动态添加。

那要怎样实现当我点击一个TextView 后实现后面的ImageView动态移动到我选中的TextView位置呢？这里我们需要为每一个TextView添加onTouchEvent()时间，并且监听ACTION_DOWN时间，也就是手指按下的时候，这时我们就启动一个TranslateAnimation平移动画，在动画结束时，再将ImageView移动到textview的位置。移动textview的位置我这里是动态调整textview的布局来实现的。

下面是实现的代码：

private void translateImage(MotionEvent event) {
    float x = event.getX();
    float rx = event.getRawX();
    final float nx = rx - x - 12;
    TranslateAnimation trans = null;
    if (nx > lastX) {
      trans = new TranslateAnimation(0, nx - lastX, 0, 0);
    } else if (nx < lastX) {
      trans = new TranslateAnimation(0, (lastX - nx) * -1, 0, 0);
    } else {
      return;
    }
    trans.setDuration(300); 

    trans.setAnimationListener(new AnimationListener() { 

      @Override
      public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub 

      } 

      @Override
      public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub 

      } 

      @Override
      public void onAnimationEnd(Animation animation) {
        FrameLayout.LayoutParams params = (android.widget.FrameLayout.LayoutParams) column_slide_bar
            .getLayoutParams();
        params.leftMargin = (int) nx;
        column_slide_bar.setLayoutParams(params);
      }
    });
    trans.setFillEnabled(true);
    column_slide_bar.startAnimation(trans);
    lastX = (int) nx;
  }

这个方法的开头我是取到手指按下的textview的坐标位置，而lastX是上一次手指按下的位置，我这里做了判断来确定移动的方向，然后给动画添加了一个动画监听事件，在动画结束时我就动态的把imageview移动到新的坐标位置。setFillEnabled(true);这里的作用主要是避免动画乱跳，这里具体是什么原因我也还不太清楚，但是设置以后动画一切都正常。

下面是textview的onTouchEvent事件的代码：

@Override
  public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
      if (up_text != null) {
        up_text.setTextColor(Color.BLACK);
      } else {
        TextView text = (TextView) context
            .findViewById(R.id.head_lines);
        text.setTextColor(Color.BLACK);
      }
      translateImage(event);
      TextView tv = (TextView) v;
      tv.setTextColor(Color.WHITE);
      up_text = tv;
    }
    return true;
  }

 在这段代码中我主要是实现了textview的字体颜色的变还，大家应该看得懂，没什么好说的吧。

最后就是实现HorizontalScrollView控件通过单机左右的imageButton来实现左右移动，这个就是在ImageButton的OnClick事件中来调用HorizontalScrollView的smoothScrollTo(x,y)方法这里面是传入新的坐标。下面是实现代码：

private void addListener() {
  column_to_left.setOnClickListener(new OnClickListener() { 

    @Override
    public void onClick(View v) {
      column_scrollview.smoothScrollTo(
          column_scrollview.getScrollX() - 40, 0);
    }
  });
  column_to_right.setOnClickListener(new View.OnClickListener() { 

    @Override
    public void onClick(View v) {
      column_scrollview.smoothScrollTo(
          column_scrollview.getScrollX() + 40, 0);
    }
  });
}

下面是动态添加textview的代码：

private void initView() {
  column_title_layout = (LinearLayout) findViewById(R.id.column_title_layout);
  column_scrollview = (HorizontalScrollView) findViewById(R.id.column_scrollview);
  column_slide_bar = (ImageView) findViewById(R.id.column_slide_bar);
  column_to_left = (ImageButton) findViewById(R.id.column_to_left);
  column_to_right = (ImageButton) findViewById(R.id.column_to_right); 

  LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(65,
      LayoutParams.WRAP_CONTENT);
  params.gravity = Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL;
  params.leftMargin = 9; 

  TextViewOnTouchListener listener = new TextViewOnTouchListener(
      column_slide_bar, this);
  TextView text = null;
  for (int i = 0; i < 6; i++) {
    text = new TextView(this);
    text.setTextSize(16);
    switch (i) {
    case 0:
      text.setId(R.id.head_lines);
      text.setTextColor(Color.WHITE);
      text.setText("头条");
      break;
    case 1:
      text.setId(R.id.sport);
      text.setTextColor(Color.BLACK);
      text.setText("体育");
      break;
    case 2:
      text.setId(R.id.entertainment);
      text.setTextColor(Color.BLACK);
      text.setText("娱乐");
      break;
    case 3:
      text.setId(R.id.finance);
      text.setTextColor(Color.BLACK);
      text.setText("财经");
      break;
    case 4:
      text.setId(R.id.technology);
      text.setTextColor(Color.BLACK);
      text.setText("科技");
      break;
    case 5:
      text.setId(R.id.more);
      text.setTextColor(Color.BLACK);
      text.setText("更多");
      break;
    }
    text.setOnTouchListener(listener);
    column_title_layout.addView(text, params);
  }
}

下面是ids.xml文件中定义的动态生成控件的id：

<?xml version="1.0" encoding="utf-8"?>
<resources> 

  <item name="column_scrollview" type="id"/>
  <item name="column_slide_bar" type="id"/>
  <item name="column_title_layout" type="id"/>
  <item name="column_navi" type="id"/>
  <item name="column_to_left" type="id"/>
  <item name="column_to_right" type="id"/>
  <item name="scroll_layout" type="id"/>
  <item name="vote" type="id"/>
  <item name="comment" type="id"/>
  <item name="picture" type="id"/>
  <item name="topic" type="id"/>
  <item name="news" type="id"/>
  <item name="head_lines" type="id"/>
  <item name="sport" type="id"/>
  <item name="entertainment" type="id"/>
  <item name="finance" type="id"/>
  <item name="technology" type="id"/>
  <item name="more" type="id"/> 

</resources>

源码下载： Android仿网易客户端顶部导航栏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索android
导航栏
微信小程序顶部导航栏、android顶部导航栏、安卓顶部导航栏、android顶部tab导航栏、bootstrap顶部导航栏，以便于您获取更多的相关知识。

时间： 2024-04-04 01:55:04

Android仿网易客户端顶部导航栏效果_Android的相关文章

Android项目实战之仿网易顶部导航栏效果_Android

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候想网易新闻要显示的内容太多,而且又想在主页面全部显示出来,所以有加了顶部导航栏,但是Android这样的移动设备内存是受限的,那么多界面缓存到内存中,很容易导致内存溢出,这个是比较致命的,所以不得不考虑.虽然我在之前也做过网易的顶部导航栏但是方式并不好,就像使用viewpager做一些复杂的界面由于图片占用内存过多,很容易导致内存溢出,学习了今天的内容大家做一下对比相信

Android项目实战之仿网易顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候想网易新闻要显示的内容太多,而且又想在主页面全部显示出来,所以有加了顶部导航栏,但是Android这样的移动设备内存是受限的,那么多界面缓存到内存中,很容易导致内存溢出,这个是比较致命的,所以不得不考虑.虽然我在之前也做过网易的顶部导航栏但是方式并不好,就像使用viewpager做一些复杂的界面由于图片占用内存过多,很容易导致内存溢出,学习了今天的内容大家做一下对比相信

高仿网易新闻顶部滑动条效果实现代码_Android

这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到. 至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢. 废话不多说,下面上代码: 首先是布局layout下的main.xml 复制代码 代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Relati

高仿网易新闻顶部滑动条效果实现代码

这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到. 至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢. 废话不多说,下面上代码: 首先是布局layout下的main.xml 复制代码 代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Relati

Android仿京东首页轮播文字效果_Android

京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个链接,那么数据源的结构就很明了了 创建ADEnity

Android实现滑动到顶部悬停的效果_Android

先来看下要实现效果图: 查阅资料后,发现网上大部分都是用这种方法实现的: 多写一个和需要悬浮的部分一模一样的layout,先把浮动区域的可见性设置为gone.当浮动区域滑动到顶部的时候,就把浮动区域B的可见性设置为VISIBLE.这样看起来就像悬浮在顶部不动了. 这里介绍的是另外一种方式: 使用design包中的控件 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.

Android仿微信对话列表滑动删除效果_Android

微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView(项目地址:https://github.com/likebamboo/SwipeListView),在其上进行了一些重构,最终实现了微信对话列表滑动删除效果. 实现原理 1.通过ListView的pointToPosition(int x, int y)来获取按下的position,然后通过android.view.ViewGroup.getChildAt(position)来得到滑动对象swipeView  2.

Android仿支付宝支付从底部弹窗效果_Android

我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能 效果图 实现 主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中 package com.example.hfs.alipayuidemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.wi

Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)

使用ViewPager,PagerSlidingTabStrip,SwipeRefreshLayout打造一款可以点击可以侧滑的顶部导航栏. 先简单介绍一下所用的两个个开源库. PagerSlidingTabStrip Github地址 用法: 1.向app Module中的build.gradle中添加依赖 dependencies { compile 'com.astuetz:pagerslidingtabstrip:1.0.1' } 2.把PagerSlidingTabStrip这个控件添