【安卓-自定义布局】安卓App开发思路 一步一个脚印（九）实现自定义滚动的新闻条目上下滚动-仿蘑菇街

实现自定义滚动的新闻条目上下滚动-仿蘑菇街

      这种上下滚动的自定义布局，就像是公告那种上下的翻滚，一般为文字的滚动，很明显，就是自定义布局，一般是线性布局。这里提到的安卓原生的控件自然是ViewFlipper

Android官方提供的一个View容器类，继承于ViewAnimator类，实现切换，设定时间间隔，自动播放。

又ViewAnimator继承至于FrameLayout的，所以ViewFilpper的Layout里面可以放置多个View，继承关系：




有了这个控件，那么实现上下滚动就好办了，无论是上下滚动还是左右，都可以。





譬如实现高仿蘑菇街的滚动公告。

布局样板

再自定义前，首先要有原来的布局样板，然后进行加工

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="@color/white"
android:weightSum="6">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_gravity="center"
>
<ImageView
android:layout_width="60dp"
android:layout_height="wrap_content"
android:src="@mipmap/fashioniconnew"
android:paddingLeft="10dp"/>
</LinearLayout>

<View
android:layout_width="0.2dp"
android:layout_height="match_parent"
android:background="@color/line"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="5"
>

  <ViewFlipper
android:id="@+id/viewflip_news"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:flipInterval="5000"  >

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#779519"
android:padding="3dp"
android:textSize="@dimen/sp_fashion_news"
android:text="活动 最后一天 | 免费领取小黄人 GO>>"
/>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="@dimen/sp_fashion_news"
android:text="抽奖 不用答题 | 直接抽奖3次免费机会 GO>>"
/>
</LinearLayout>

</ViewFlipper>

</LinearLayout> 

</LinearLayout>

</LinearLayout>

现在我们知道要实现的布局样式了，那么就通过自定义的Linearlayout实现滚动，主要涉及到自定义布局的实现，内部的样式就是调用LayoutParams 和addRules实现

其中的红色字的样式就是我们要通过java定义出来，所以成了所谓的自定义布局，如何实现呢？

自定义布局java代码

/**
* 自定义滚动的新闻条目上下滚动
* Created by Administrator on 2016/10/4 0004.
*/
public class MyAdvNews extends LinearLayout{

private Context mcontext;
public ViewFlipper mViewFlipper;
public MyAdvNews(Context context) {
super(context);
this.mcontext = context;
}

public MyAdvNews(Context context, AttributeSet attrs) {
super(context, attrs);
this.mcontext = context;
init();
setNews();
}

private void init() {
LayoutInflater layoutInflater = LayoutInflater.from(mcontext);

LinearLayout mLinearlayout= (LinearLayout) layoutInflater.inflate(R.layout.layout_adv_news, null);
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
addView(mLinearlayout, params);

mViewFlipper = (ViewFlipper) mLinearlayout.findViewById(R.id.myflip);
mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(mcontext, R.anim.adv_news_slide_in_bottom));
mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(mcontext, R.anim.adv_news_slide_out_top));
mViewFlipper.startFlipping();

}

private void setNews() {
mViewFlipper.removeAllViews();

Map<String,String> newsmap = new HashMap<String,String>();
newsmap.put("0","活动 最后一天 | 免费领取小黄人 GO>>");
newsmap.put("0_2","抽奖 不用答题 | 直接抽奖3次免费机会 GO>>");
newsmap.put("1","活动 最后一天 | 免费领取小黄人 GO>>2");
newsmap.put("1_2","抽奖 不用答题 | 直接抽奖3次免费机会 GO>>2");
newsmap.put("2","活动 最后一天 | 免费领取小黄人 GO>>3");
newsmap.put("2_2","抽奖 不用答题 | 直接抽奖3次免费机会 GO>>3");

int i = 0;
while (i < newsmap.size()/2) {
LinearLayout linearLayout = new LinearLayout(mcontext);
linearLayout.setOrientation(LinearLayout.VERTICAL);
linearLayout.setPadding(5, 5, 5, 5);

TextView mTextView1 = new TextView(mcontext);
mTextView1.setText(newsmap.get(i+""));
mTextView1.setTextColor(Color.parseColor("#779519"));
mTextView1.setPadding(3, 3, 3, 3);
mTextView1.setTextSize(13);
LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

TextView mTextView2 = new TextView(mcontext);
mTextView2.setText(newsmap.get(i+"_2"));
mTextView2.setTextColor(Color.parseColor("#779519"));
mTextView2.setPadding(3, 3, 3, 3);
mTextView2.setTextSize(13);

linearLayout.addView(mTextView1, layoutParams);
linearLayout.addView(mTextView2, layoutParams);
LayoutParams layoutParams2 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
mViewFlipper.addView(linearLayout,layoutParams2);

i++;
}
}

}

anim的动画属性

其中的anim的动画属性可以自己定义，从上到下，从上到上等，满为100%p 最低为0 

譬如

anim.adv_news_slide_in_bottom

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
android:duration="1000"
android:fromYDelta="100%p"
android:toYDelta="0" />
</set>

那么只要在用的地方调用 即可了

<net.fineteam.nobuy.widget.MyAdvNews
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</net.fineteam.nobuy.widget.MyAdvNews>