詞Ci 介紹頁 StackView的使用

詞Ci的介紹頁是這樣的，可以上下滑動翻頁。

這樣效果自己要實現還是很麻煩的，後來發現已經有了Stack'View就是這樣效果了，要做的就是使用啦。

public class IntroductionView extends RelativeLayout
{
    private Context mContext;
    final int[] mColors = {R.drawable.intro00, R.drawable.intro01, R.drawable.intro02, R.drawable.intro03,
            R.drawable.intro04, R.drawable.intro05};
    public IntroductionView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
    }
    public IntroductionView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
    public IntroductionView(Context context)
    {
        super(context);
        mContext = context;
        initView();
    }
    private void layoutItemContainer(View itemContainer)
    {
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) itemContainer.getLayoutParams();
        params.width = LayoutParams.MATCH_PARENT;
        params.height = ResizeUtil.resize(mContext, 864);
        itemContainer.setLayoutParams(params);
    }

    private void initView()
    {
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View root = inflater.inflate(R.layout.layout_intro, null);
        TextView title = (TextView) root.findViewById(R.id.title);
        title.setTypeface(MyApplication.getTypeface());
        final StackView stackView = (StackView) root.findViewById(R.id.stack_view);
        layoutItemContainer(stackView);
        IntroAdapter colorAdapter = new IntroAdapter(mContext, mColors);
        stackView.setAdapter(colorAdapter);
        stackView.getLayoutParams().height = ResizeUtil.resize(mContext, 600);
        // stackView.setLayoutParams(new LayoutParams(-1, ));
        addView(root, new LayoutParams(-1, -1));
    }

}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="詞Ci介紹"
        android:textColor="@color/white"
        android:layout_marginTop="100dp"
        android:layout_centerHorizontal="true"
        android:textSize="28sp" />

    <StackView
        android:id="@+id/stack_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="60dp"
        android:loopViews="true" />

</RelativeLayout>

StackView 也是繼承了AdapterView<Adapter>的，adpater的寫法也沒什麼區別。

這裏有個要注意的地方是自定義View的LayoutParams設置問題，

<pre name="code" class="java">// stackView.setLayoutParams(new LayoutParams(-1, ));
        addView(root, new LayoutParams(-1, -1));

上面一句是沒必要的，addView時注意要加上LayoutParams,-1就是MatchParent，這樣寫着快點，但應該還是要寫名稱好。

 public View getView(int position, View convertView, ViewGroup parent)
    {
        ViewHolder holder;
        if (convertView == null)
        {
            holder = new ViewHolder();
            LinearLayout.LayoutParams colorLayoutParams = new LinearLayout.LayoutParams(
                    ResizeUtil.resize(mContext, 450), ResizeUtil.resize(mContext, 540));

            convertView = new LinearLayout(mContext);
            holder.imageview = new ImageView(mContext);

            holder.imageview.setScaleType(ScaleType.FIT_XY);
            holder.imageview.setLayoutParams(colorLayoutParams);
            ((LinearLayout) convertView).addView(holder.imageview);
            convertView.setTag(holder);
        }
        else
        {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.imageview.setImageResource(mColors[position]);

        return convertView;
    }

Adapter就貼個getView了，其它也一樣。這裏設置每一項的寬度爲450，高度爲540，整個StackView寬度是MatchParent,高度是600，寬度MatchParent是viewPage一個Page的寬度，就是540，這樣每一項寬高和整體的寬高就有差值了，然後整體顯示就有種疊加的書頁的效果了。（這裏的寬高數值都是把界面寬度當做720的比值，上一篇講到過的）