iOS水平滚动日历

时间:2011-10-21 00:18:19

标签: objective-c ios horizontalscrollview

一些背景知识。我正在帮助我儿子学校的一群学生,他们想写一个简单的跟踪应用程序来管理将在iPod Touch上使用的学生观察。

我只使用标准小部件进行了非常基本的iOS开发,但我很乐意提供帮助。

我们完成并设计了应用程序的功能和界面,现在开始编程。我不在的地方是,他们希望每天都有一条沿着屏幕底部运行的条带作为显示日期和日期的小块,以及一个指示器,以显示当天是否有观察结果。

我希望你们能够指出我正确的方向,无论是现有的小部件还是详细解释如何实现这一目标。我尝试了一些没有运气的方法。

我很感激对此的任何帮助,因为我知道这必须是一个共同的要求,但我很难通过这个。

2 个答案:

答案 0 :(得分:5)

我想我会发布我的最终解决方案,以防其他人发现它有用。

在视图根视图控制器中,我添加了一个自定义UITableViewController,它基本上将表旋转90度,然后将每个表格单元旋转-90度。它做我想要的是非常直接的。

根视图控制器的代码。这将设置表格的大小和位置:

scrollingDateViewController=[[ScrollingDateViewController alloc] initWithNibName:@"ScrollingDateView" bundle:[NSBundle mainBundle]];
CGRect rect=CGRectMake(0,330,320,100);    
scrollingDateViewController.view.frame=rect;
scrollingDateViewController.view.backgroundColor=[UIColor clearColor];
scrollingDateViewController.delegate = self;
[self.view addSubview:scrollingDateViewController.view];

ScrollingDateViewController的密钥代码。这将表旋转90度,每个单元旋转-90度:

- (void)viewDidLoad {
today = [[NSDate alloc] init];    
CGRect rect=self.view.frame;
myTableView.frame=rect;
myTableView.layer.transform = CATransform3DRotate(CATransform3DIdentity,1.57079633,0,0,1);
myTableView.backgroundColor=[UIColor clearColor];
myTableView.separatorColor=[UIColor clearColor];
myTableView.frame=rect;
myTableView.rowHeight=44;  // cellWidth
myTableView.showsHorizontalScrollIndicator=NO;
myTableView.showsVerticalScrollIndicator=NO;
myTableView.separatorColor=nil;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:@"tableCell"];
if(!cell){
    cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"tableCell"];
    cell.contentView.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"cell_back.png"]];
    cell.contentView.transform =  CGAffineTransformMakeRotation(-1.57079633);
    cell.selectionStyle=UITableViewCellSelectionStyleGray;

    // Add background image view
    CGRect rect=CGRectZero;
    UIImageView *imgView=[[UIImageView alloc] initWithFrame:rect];
    imgView.contentMode=UIViewContentModeScaleToFill;
    imgView.layer.transform = CATransform3DRotate(CATransform3DIdentity,-1.57079633,0,0,1);
    imgView.tag=101;
    [cell addSubview:imgView];

    rect.origin.x=0;
    rect.origin.y=0;
    rect.size.height=80;
    rect.size.width=44;
    imgView.frame=rect;
    [imgView release];

    // Add Day Label
    UILabel *dayLabel=[[UILabel alloc] initWithFrame:rect];
    dayLabel.layer.transform = CATransform3DRotate(CATransform3DIdentity,-1.57079633,0,0,1);
    dayLabel.tag=102;
    dayLabel.font = [UIFont fontWithName:@"Geogrotesque-Medium" size:14.0];
    dayLabel.textAlignment=UITextAlignmentCenter;
    dayLabel.backgroundColor=[UIColor clearColor];
    dayLabel.textColor=[UIColor darkGrayColor];

    [cell addSubview:dayLabel];
    rect.origin.x=40;
    rect.origin.y=0;
    rect.size.height=44;
    rect.size.width=20;
    dayLabel.frame=rect;
    [dayLabel release];

    // Add Date Label
    UILabel *dateLabel=[[UILabel alloc] initWithFrame:rect];
    dateLabel.layer.transform = CATransform3DRotate(CATransform3DIdentity,-1.57079633,0,0,1);
    dateLabel.tag=103;
    dateLabel.font = [UIFont fontWithName:@"Geogrotesque-Bold" size:18.0 ];
    dateLabel.textAlignment=UITextAlignmentCenter;
    dateLabel.backgroundColor=[UIColor clearColor];
    dateLabel.textColor=[UIColor darkGrayColor];

    [cell addSubview:dateLabel];
    rect.origin.x=55;
    rect.origin.y=0;
    rect.size.height=44;
    rect.size.width=20;
    dateLabel.frame=rect;

    [dateLabel release];
}

UILabel *label=(UILabel*)[cell viewWithTag:102];
label.text= [self getDayString:displayDate];
label=(UILabel*)[cell viewWithTag:103];
label.text= [self getDateString:displayDate];
return cell;

}

答案 1 :(得分:1)

恕我直言,你应该创建一个你希望每个日期显示的视图。创建像

这样的东西
@interface DayView : UIView {

您可以使用nib实现它,或者使用drawRect方法以编程方式创建所有内容。

转到Xcode文档并搜索UIScrollView之后。 Xcode将提供您的代码示例,使用项目“滚动”来了解如何使用scrollView。在此示例中,他们滚动图片,然后使用我们的自定义DayView替换它们。

祝你好运!