水平滚动日历视图

时间：2019-04-03 17:36:24

标签： android calendar

我想创建水平滚动日历视图，如下图所示。 enter image description here

我有一些第三方库可以创建日历视图，但是所有这些库仅支持普通日历。我希望日历的最小化版本能够水平滚动，并且在单击日期时应该更新内容。

2 个答案:

答案 0 :(得分：2)

这是旧文章，但我想分享我的发现

此库提供了出色的自定义功能，使用Kotlin编写，并支持SDK> = 21

SingleRowCalendar GitHub

并查看this中篇文章以获取逐步指南。

以下是您可以轻松生成的一些示例UI

enter image description here enter image description here enter image description here enter image description here enter image description here

答案 1 :(得分：1)

您可以尝试出色的https://github.com/Mulham-Raee/Horizontal-Calendar，它具有您需要的一切。

以下是使用示例

首先将其添加到您的xml文件中

<!DOCTYPE html>
<html>
<head>
    <title>Count Up Numbers Example</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

    <style type="text/css">
        /* 
        Courtesy: abcc.com
        https://abcc.com/en
        https://abcc.com/en/at-mining 
        */
        .rewards {
            background-color: #160922;
        }

        .th-num-bold {
            font-family: "Arial" ;
        }

        .ff-arial {
            font-family: "Arial" ;
        }

        .scroll-wrap .scroll-exchange-fee .exchange_time {
            color: hsla(0,0%,100%,.7);
            font-size: 13px;
        }

        .f14 {
            font-size: 14px;
        }

        .flex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

        .jcsb {
            -ms-flex-pack: justify!important;
            -webkit-box-pack: justify!important;
            justify-content: space-between!important;
        }

        .aic {
            -ms-flex-align: center!important;
            -webkit-box-align: center!important;
            align-items: center!important;
        }


        li {
            list-style: none;
        }

        .pull-left {
            float: left!important;
        }

        .rewards-wrap {
            height: 100%;
        }

        .at-equity-wrap .rewards .calculate_container {
            -webkit-box-shadow: rgba(0,0,0,.03) 0 5px 10px 0;
            background: url(https://s.abcc.com/portal/static/img/home-bg-pc.c9207cd.png);
            background-repeat: no-repeat;
            background-size: 1440px 100%;
            box-shadow: 0 5px 10px 0 rgba(0,0,0,.03);
            margin: 0 auto;
            max-width: 1200px;
            overflow: hidden;
            position: relative;
        }

        .rewards-pc-wrap .current-profit .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .current-profit .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .current-profit .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .current-profit .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap .yesterday-profit .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .yesterday-profit .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .yesterday-profit .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .yesterday-profit .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap .profit-rate-100 .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .profit-rate-100 .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .profit-rate-100 .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .profit-rate-100 .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap .total-profit .point {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .total-profit .integer {
            color: #fff;
            font-size: 45px;
        }

        .rewards-pc-wrap .total-profit .decimal {
            color: #fff;
            font-size: 25px;
        }

        .rewards-pc-wrap .total-profit .unit {
            color: #fff;
            font-size: 24px;
            margin-right: 5px;
            margin-top: 18px;
        }

        .rewards-pc-wrap {
            height: 400px;
            margin-left: 129px;
            padding-top: 100px;
            width: 630px;
        }

        .itm-rv {
            -ms-flex: 1;
            -webkit-box-flex: 1;
            flex: 1;
            font-family: "Arial";
        }

        .fb {
            font-weight: 700;
        }

        .main-p {
            color: hsla(0,0%,100%,.7);
            font-size: 13px;
            margin-bottom: 8px;
            margin-top: 10px;
        }

        .sub-p {
            color: hsla(0,0%,100%,.5);
            font-size: 12px;
            margin-top: 12px;
        }

        .fb-r {
            font-weight: 300;
        }

        .price-btc {
            color: hsla(0,0%,100%,.5);
            font-size: 13px;
            margin-top: 10px;
        }

    </style>
</head>
<body>
    <div class="at-equity-wrap">
        <div  class="rewards" >
            <div  class="calculate_container">
                <div  class="rewards-wrap">
                    <div class="flex jcc aic">
                        <div  class="rewards-pc-wrap slideInUp" id="nuBlock">
                            <div  class="flex jcsb aic">
                                <div  class="itm-rv" style="margin-right: 60px;">
                                    <div  class="current-profit th-num-bold fb"><span  class="unit pull-left">$</span> <span class="integer" id="cr_prft_int" >0</span> <span  class="point">.</span> <span class="decimal" id="cr_prft_dcml" >00</span></div>
                                    <p  class="main-p">Platform Rewards to Be Distributed Today</p>
                                    <p  class="sub-p fb-r">Total circulating KAT eligible for rewards:100,000,000</p>
                                </div>
                                <div  class="itm-rv">
                                    <div  class="profit-rate-100 th-num-bold"><span  class="unit pull-left">$</span> <span  class="integer" id="dly_prft_int" >0</span> <span  class="point">.</span><span  class="decimal" id="dly_prft_dcml" >00</span></div>
                                    <p  class="main-p">Daily Rewards of 1000 KAT</p>
                                    <div  class="profit-rate sub-p fb-r"><span >Daily KAT Rewards Rate</span> <span  class="integer">0</span> <span  class="decimal">.00</span> <span  class="unit">%</span></div>
                                </div>
                            </div>
                            <div  class="flex jcsb aic" style="margin-top: 40px;">
                                <div  class="itm-rv" style="margin-right: 60px;">
                                    <div  class="yesterday-profit th-num-bold fb'"><span  class="unit pull-left">$</span> <span  class="integer" id="ytd_prft_int" >0</span> <span  class="point">.</span><span  class="decimal" id="ytd_prft_dcml" >00</span></div>
                                    <div  class="price-btc fb-r">/ 0.00000000 BTC</div>
                                    <p  class="main-p fb-r">Platform Rewards Distributed Yesterday</p>
                                </div>
                                <div  class="itm-rv">
                                    <div  class="total-profit th-num-bold fb'"><span  class="unit pull-left">$</span> <span  class="integer" id="ttl_prft_int" >0</span> <span  class="point">.</span><span  class="decimal" id="ttl_prft_dcml" >00</span></div>
                                    <div  class="price-btc fb-r">/ 0.00000000 BTC</div>
                                    <p  class="main-p fb-r">Cumulative Platform Rewards Distributed</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">

    $(document).on('ready', function(){

        setTimeout(function(){ 
            cr_countUp();
            dly_countUp();
            ytd_countUp();
            ttl_countUp();
        }, 2000);

    });

    unit = "$";

    var cr_data, dly_data, ytd_data, ttl_data;
    cr_data = dly_data = ytd_data = ttl_data = ["670.0000682", "670.002", "660.000068", "660.002", "650.000000063", "650.01", "640.00000006", "640.01", "630.0000000602", "630.01", "620.0000000622", "620.01", "610.00000016", "610.002", "600.00000015998", "600.002", "590.00000094", "590.002", "580.0000009", "580.002", "760.0000682", "760.002", "660.000068", "660.002", "560.000000063", "560.01", "460.00000006", "460.01", "360.0000000602", "360.01", "260.0000000622", "260.01", "160.00000016", "160.002", "060.00000015998", "060.002", "950.00000094", "950.002", "850.0000009", "850.002"];

    cr_start = 0;
    cr_stop = cr_data.length - 1;
    cr_nu = 20;

    function cr_countUp(){
        setTimeout(function(){
            $("#cr_prft_int").text(cr_data[cr_start].split(".")[0]);
            $("#cr_prft_dcml").text(cr_data[cr_start].split(".")[1]);
            if(cr_start < cr_stop){
                cr_start += 1;
                cr_countUp();
            }
        }, cr_nu);
    }

    dly_start = 0;
    dly_stop = dly_data.length - 1;
    dly_nu = 20;

    function dly_countUp(){
        setTimeout(function(){
            $("#dly_prft_int").text(dly_data[dly_start].split(".")[0]);
            $("#dly_prft_dcml").text(dly_data[dly_start].split(".")[1]);
            if(dly_start < dly_stop){
                dly_start += 1;
                dly_countUp();
            }
        }, dly_nu);
    }

    ytd_start = 0;
    ytd_stop = ytd_data.length - 1;
    ytd_nu = 20;

    function ytd_countUp(){
        setTimeout(function(){
            $("#ytd_prft_int").text(ytd_data[ytd_start].split(".")[0]);
            $("#ytd_prft_dcml").text(ytd_data[ytd_start].split(".")[1]);
            if(ytd_start < ytd_stop){
                ytd_start += 1;
                ytd_countUp();
            }
        }, ytd_nu);
    }

    ttl_start = 0;
    ttl_stop = ttl_data.length - 1;
    ttl_nu = 20;

    function ttl_countUp(){
        setTimeout(function(){
            $("#ttl_prft_int").text(ttl_data[ttl_start].split(".")[0]);
            $("#ttl_prft_dcml").text(ttl_data[ttl_start].split(".")[1]);
            if(ttl_start < ttl_stop){
                ttl_start += 1;
                ttl_countUp();
            }
        }, ttl_nu);

    }
</script>
</html>

然后您的活动声明<devs.mulham.horizontalcalendar.HorizontalCalendarView android:id="@+id/calendarView" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FAFAFA" app:selectedDateBackground="#00ffffff" app:selectorColor="#c62828" app:textColorNormal="#bababa" app:textColorSelected="@color/blue_color" app:textSizeDayName="20sp" app:textSizeDayNumber="20sp" /> 的实例

HorizontalCalendar

最后是Java代码

private HorizontalCalendar horizontalCalendar;
相关问题
最新问题