xamarin.Android 实现横向滚动导航

经过一段时间的练习，自己也做了不少的demo和一些小项目，今天就把这些demo分享给大家，也当做笔记记录到自己的博客中。

这次给大家带来的是HorizontalScrollView实现横向滑动，参考博客http://fangyong2006.iteye.com/blog/2035093?utm_source=tuicool。

先让大家简单的了解一下什么是HorizontalScrollView。

HorizontalScrollView 是一种 框架布局。HorizontalScrollView是一个 FrameLayout ， 这意味着你只能在它下面放置一个子控件 ，这个子控件可以包含很多数据内容。允许视图结构比手机的屏幕大。 这个布局控件一般使用的是一个水平布局的 LinearLayout 。 文本视图 类也有其自身的滚动处理，不需要嵌入滚动视图； 但二者可以组合使用，其效果与将文本视图放入很大容器中一样. HorizontalScrollView 只支持水平方向的滚动。 HorizontalScrollView不可以和ListView同时用。

下面我分三个步骤完成个demo，视图，适配器，主体代码。

视图Main.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip">
        <HorizontalScrollView
            android:id="@+id/category_scrollview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="6dip"
            android:scrollbars="none">
            <LinearLayout
                android:id="@+id/category_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal" />
        </HorizontalScrollView>
    </RelativeLayout>
</LinearLayout>

Text.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <ImageView
        android:src="@android:drawable/ic_menu_gallery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1"
        android:layout_gravity="center" />
    <TextView
        android:text="Text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvbutn"
        android:layout_gravity="center" />
</LinearLayout>

适配器TitleAdapter

class TitleAdapter : BaseAdapter
    {
        private Context context;
        private List<String> titles;
        public TitleAdapter(Context context, List<String> strings)
        {
            this.context = context;
            titles = strings;
        }

        public override int Count
        {
            get { return titles.Count; }
        }

        public override Java.Lang.Object GetItem(int position)
        {
            return null;
        }

        public override long GetItemId(int position)
        {
            return position;
        }

        public override Android.Views.View GetView(int position, Android.Views.View convertView, Android.Views.ViewGroup parent)
        {
            convertView = LayoutInflater.From(context).Inflate(Resource.Layout.Text, null);
            ImageView img = convertView.FindViewById<ImageView>(Resource.Id.imageView1);
            TextView title = convertView.FindViewById<TextView>(Resource.Id.tvbutn);         
            title.Text = titles[position].ToString();
            if (title.Text == titles[0].ToString())
            {
                title.SetTextColor(Color.Red);
            }
            return convertView;
        }
    }

最后的MainActivity

    public class Activity1 : Activity, AdapterView.IOnItemClickListener, View.IOnClickListener 
    {
        /* 导航菜单集合 */
        private List<String> array;
        /* 导航菜单适配器 */
        private TitleAdapter titleAdapter;
        /* 列宽 */
        private int COLUMNWIDTH = 170;
        /* 导航菜单布局 */
        private GridView category;
        /* 导航菜单容器，存放导航菜单布局 */
        private LinearLayout categoryLayout;
        private HorizontalScrollView horizontalScrollView;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            FindViews();
            setListeners();
            initViews();
        }

        private void FindViews()
        {
            horizontalScrollView = FindViewById<HorizontalScrollView>(Resource.Id.category_scrollview);
            categoryLayout = FindViewById<LinearLayout>(Resource.Id.category_layout);
            // 新建一个GridView
            category = new GridView(ApplicationContext);
        }
        private void setListeners()
        {
            // 设置GridView的点击事件
            category.OnItemClickListener = this;
        }
        private void initViews()
        {
            array = new List<string>();
            array.Add("一号标题");
            array.Add("二号标题");
            array.Add("三号标题");
            array.Add("四号标题");
            // 最简单的一个适配器，里面就一个TextView
            titleAdapter = new TitleAdapter(ApplicationContext, array);
            // 设置内部子栏目的宽度
            category.SetColumnWidth(COLUMNWIDTH);
            // 设置内部子栏目个数为自动适应
            category.SetNumColumns(array.Count);
            // 设置Gravity为Center
            category.SetGravity(GravityFlags.Center);
            // 设置Selector为透明
            category.Selector = new ColorDrawable(Color.Transparent);
            int width = COLUMNWIDTH * array.Count;
            Android.Widget.LinearLayout.LayoutParams layoutParams = new Android.Widget.LinearLayout.LayoutParams(width, Android.Widget.LinearLayout.LayoutParams.WrapContent);
            // 设置GridView的LayoutParams为子栏目的宽度乘以栏目个数
            category.LayoutParameters = layoutParams;
            // 设置适配器
            category.Adapter = titleAdapter;
            // 将新建的GridView添加到布局中
            categoryLayout.AddView(category);
        }        
        public void OnClick(View v)
        {
            horizontalScrollView.Fling(550);
        }

        public void OnItemClick(AdapterView parent, View view, int position, long id)
        {
            TextView categoryTitle;
            // 每次都循环的将子栏目的颜色和背景还原
            for (int i = 0; i < parent.Count; i++)
            {
                categoryTitle = (TextView)parent.GetChildAt(i);
                categoryTitle.SetTextColor(Color.White);
                categoryTitle.SetBackgroundDrawable(null);
            }

            categoryTitle = (TextView)view;
            categoryTitle.SetTextColor(Color.Red);
            //Tle.Text = categoryTitle.Text;
        }
    }

代码大致都差不多，分享过来给大家参考，最后的效果也就和上述博客差不多。