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;
        }
    }

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

时间: 2024-11-04 19:47:04

xamarin.Android 实现横向滚动导航的相关文章

Android TextView 横向滚动(跑马灯效果)

Android TextView 中当文字比较多时希望它横向滚动显示,下面是一种亲测可行的方法. 效果图: 1.自定义TextView,重写isFocused()方法返回true,让自定义TextView一直处于获取焦点状态. package com.example.shen.marqueedemo; import android.content.Context; import android.util.AttributeSet; import android.widget.TextView;

Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这

Android 横向列表GridView 实现横向滚动

Android 横向列表实现,可左右滑动,如下图 1.主界面布局代码:activity_main.xml a.包裹HorizontalScrollView控件是GirdView横向滚动的基本条件b.GirdView外包裹LinearLayout是java代码中参数设置的必要条件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schema

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码:

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码: &

Xamarin.Android绑定库分享

使用Xamarin.Android时,会用到各种第三方库,而这些库基本上是java编写的,要在Xamarin.Android中使用这些库,就需要通过Android Binding Project绑定对应的java库,然后在C#中使用.绑定时,可能需要编写相关的转换规则或者修改对应的java源代码,遇到问题时,可以到Xamarin的官网查看,也可以Google. Xamarin.Android绑定参考文档地址: http://developer.xamarin.com/guides/android

Xamarin. Android实现下拉刷新功能

下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. Android中要实现一个好用的下拉刷新功能却不是很容易,在网上找了几个Xamarin.Android的下拉刷新控件,都不是很满意,所以想重新绑定一个java写的下拉刷新控件.在网上找了几个这样的开源库,通过对比发现android-pull-to-refresh实现的功能比较多,实现的效果也比较满意. Android-Pull-To-Refresh项目地址:http

我正在使用Xamarin的跨平台框架—Xamarin.Android回忆录

一.缘起 在自己给别家公司做兼职外包的时候,已经明确知道外包的活不是那么好干的,一般在经历了初期热血澎湃的激情后,逐渐冷淡,愤怒,再冷淡,再愤怒…,听上去好像高潮迭起,但令人尴尬的是,这高潮迭起我们都不想要,以至于最后都想草草结束,一走了之.但当我们把Android移动应用委托第三方开发后,还是未能料到产品会如此粗糙,在不能确定这产品要到何时才能与观众见面时,我们果断终止了恋爱. 于是接下来可选的方案有限,初期采用好评如潮的phonegap开发后,其界面的流畅速度,尤其以下滑滚动速度最让人不能接

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造